Jump to content

Page Transition Strategy

Recommended Posts

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: https://codepen.io/MAW/pen/yYradO/, 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.


Share this post

Link to post
Share on other sites

Hi, good day

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

Share this post

Link to post
Share on other sites

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


  • Like 3

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.