Page Transition Strategy

[abattenburg]

Hi GSAP Forum,

 

I apologize if this has been covered, but I was curious what the general approach is for animating in new pages. A lot of design agencies have this effect where on a preloaded site, a new page will be animated into the viewport and then the URL updates to reflect the new page. This can be seen all over but www.hellomonday.com and www.10x16.com are both examples of what I’m talking about.

 

In a different thread, Diaco posted this codepen: , which shows transitions using the scroll to plugin and placing pages off the screen.  Is that the general approach? Placing pages out of the viewport and then animating them in when they are needed with a higher Z-index? I used that strategy when creating a nav that comes down from the top, but wasn’t sure if it is the best way to handle whole pages. Is the URL change just signifying an anchor?

 

Thank you so much for the help and sorry about basic questions, still wrapping my head around GSAP.

 

See the Pen yYradO by MAW (@MAW) on CodePen

[shaka47]

Hi, good day

Just wondering if you did find the answer about your question, i´m looking the same thread

[Carl]

Hi Shaka,

 

It sounds like you may be referring to a Single Page Application (SPA)

Definitely do some google searching on those with GSAP.

You may also need some other framework that was designed to handle state changes and such like React / Vue / Angular

 

These 2 threads may help you get started