Jump to content


Routing transition jump after fetching

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts


I implemented the example based on the React example with React transition group. 


Here I have the main page with three dynamic routes and when I click I have a jump first from left and then it gets smooth. I guess that's because the data started fetching and it's broken.  How to fix it?

Actually, I have almost the same issue. I have the data fetching from contentful. When I click on dynamic route, I filtered some data and show it on the screen. The transition works fine. Then on this page, I have back button and when I clicked on it, the smooth transition doesn't work anymore. The data just disappear and only then transition happen. It's only the dynamic route issue.

Link to comment
Share on other sites

  • Solution



This actually is not GSAP related, but stems from the configuration you have for your transitions and the timeout property in the Transition component.


You have this in the Transition component:

timeout={500} // <- Timeout of just 500ms or 0.5 seconds
onEnter={() => {
  const node = nodeRef.current;
  gsap.set(node, { autoAlpha: 0, scale: 0.8, xPercent: -100 });
    paused: true,
    onComplete: () => toggleCompleted(true),
    .to(node, { autoAlpha: 1, xPercent: 0, duration: 0.25 })
    .to(node, { scale: 1, duration: 3 })
onExit={() => {
  const node = nodeRef.current;
    .timeline({ paused: true })
    .to(node, { scale: 0.8, duration: 3 })
    .to(node, { xPercent: 100, autoAlpha: 0, duration: 3 })
    <div ref={nodeRef}>{children}</div>

But the animation in has a duration of 3 seconds and the out animation six seconds!. The timeout option tells Transition Group when the DOM should be ready to be updated, hence those jumps. If you change the timeout value to 6500 it works.




A word of advice, as a user I would really, really, REALLY hate if the developers would have me waiting over nine(!) seconds between one page and the other I would close the site never go back. IMHO that's really bad UX. Just my two cents on the subject.


Hopefully this helps.

Happy Tweening!

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.