Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Shrug ¯\_(ツ)_/¯

Page Transitions -- Would this approach work ?

Recommended Posts

Hello everyone,

 

I have not been around in 8 years, since the foregone Flash days.

 

But lately I have found my way back, again needing a pair of fancy green socks, so I have been recently lurking about trying to get my head around things again. What a great community this is with such awesome discussions, truly amazing talents and bright minds amongst the users. Its great to see Greensock still going so strong.

 

In regards to Page Transitions:

 

Recently I say this thread which make me think. I also spent time searching the forum pretty extensively, looking at various discussions and approaches. But in the end I still was left wondering -- I’m not sure if applicable but what about using localStorage as an approach ? Verse going the whole Single Page App (SPA) approach, etc.,


My thought is using localStorage in conjunction with timeline based functions for page “intro” and “outro” sequences specific to each page and saving the toggle state into localStorage to know which function or direction to play when coming or going between pages. Given GSAP’s powerful timeline capabilities, etc.,  it seems like it could be a viable option.

 

Does this theory make sense, or am I missing the obvious in thinking to pair the two together?

 

There seems to be very little discussion about localStorage or sessionStorage on the forum in general. So perhaps it would not be relative to how I am thinking it could be used, as it seems it would have already been discussed. I understand it begins to fall out of the scope of GSAP, but at least in my head they seem really applicable to be used alongside each other in many ways.

 

Does anyone anticipate any drawbacks, issues, problems to this localStorage + GSAP approach for handling page transitions? If so please set my thinking straight. I would love to get some peoples thoughts, feedback or experiences before trying to go down the rabbit hole of pairing the two together. Especially if my initial thinking is flawed, and especially since I am just getting back into things after a long time away. Perhaps too much to chew off initially.

 

Thanks in advance for any feedback anyone may offer, again great community!

Link to comment
Share on other sites

I think this is the first question I've seen that dealt specifically with localStorage.

 

Yes, you can use local/sessionStorage to keep track of what animations have played, but for a smooth transition between page transitions without a jarring page load, you really need to use some type of AJAX/SPA based loading technique. Don't know if you saw this page, but it has a couple of other suggestions like jQuery and barba.js.

 

 

  • Like 4
Link to comment
Share on other sites

5 hours ago, OSUblake said:

for a smooth transition between page transitions "without a jarring page load", you really need to use some type of AJAX/SPA based loading technique

 

@OSUblake thanks so much for your response.

 

Yes I previously looked through many discussions, both here and elsewhere. But I think perhaps my head is now wrapped around it a little better verse my previous thinking and discussed approach. I will continue to look into various techniques and approaches, was hoping to leverage the lightest approach possible.

 

Thanks again for taking time to respond, really enjoy coming across and reading your posts.

  • Like 1
Link to comment
Share on other sites

Also check out this discussion with a couple of frameworks that do this sort of thing, Barba js might be what you're looking for.

 

 

  • Like 1
Link to comment
Share on other sites

I think that one big cons with localStorage and sessionStorage is that your page transitions will not work with history on the browser. And the workaround for this issue make more convenient to use a SPA.

  • Like 2
Link to comment
Share on other sites

Hi @Visual-Q , thank you. Yes I had seen that thread also, some good discussions in there.

 

Hi @AngusSimons , thank you. In regards to browser history, you can use HTML5 history.pushState for that.

 

-------

As stated above, I think my head is around things better after making this thread.

 

I am not sure the direction I will go, but have a better understanding of things since my initial whimsical thoughts on using localStorage alone. Many of the existing libraries seem a bit convoluted to me, but then again I'm not sure if I wish to reinvent the wheel either. I think it could be done fairly simply with a combination of: XMLHttpRequest, pushState, localStage, etc., and GSAP goodness.

 

I will continue reviewing various approaches and existing solutions.

 

Thanks everyone for your input, sorry I didn't think it through better before posting. :-)

  • Like 1
Link to comment
Share on other sites

The jQuery example I showed in that other thread is probably the simplest solution. Basically you load up an html snippet, and in the callback you animate the old content out, and the new content in. Usually helps if you position the content absolutely inside a container.

 

<main style="position:relative">
  <section id="old-content" style="position:absolute">Old Stuff</section>
  <section id="new-content" style="position:absolute">New Stuff</section>
</main>

 

 

$.get("new-content.html", function(data) {
  
  // Add new-content html
  $("main").append(data);
  
  // Out with the old
  TweenLite.to("#old-content", 1, {
    autoAlpha: 0,
    onComplete: function() {
      $("#old-content").remove();
    }
  });
  
  // In with the new
  TweenLite.from("#new-content", 1, {
    autoAlpha: 0 
  });
});

 

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×