Jump to content
Search Community

Routing transition jump after fetching

Sherlok test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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.

Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

  • 1 year later...

Have you an idea how implementing this with the animations in and out gsap playing in the same time on the different routes ? I've tried the last three days with no success...

Link to comment
Share on other sites

Hi @ncp and welcome to the GSAP Forums!

 

That is a completely different approach actually, because both elements are rendered in the DOM at the same time, which requires a completely different approach in terms of React Transition Group and styles as well.

 

We have this demo that works pretty well, maybe you can get some some ideas from it:

https://stackblitz.com/edit/react-6rzfpp

 

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.
×
×
  • Create New...