Routing transition jump after fetching

[Sherlok]

Hello,

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

https://stackblitz.com/edit/react-ehcda5?file=src%2Fcomponents%2FTransition.js

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.

[Rodrigo]

Hi,

 

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:

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

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.

 

https://reactcommunity.org/react-transition-group/transition#Transition-prop-timeout

 

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!