Jump to content
Search Community

Transitions not working with React-Router-Dom, GSAP, and React-Transition-Group

blumaa@gmail.com test
Moderator Tag

Recommended Posts

Sample codesandbox: https://codesandbox.io/s/react-transition-test-o5kr6?file=/src/Logo.jsx

 

Hello! I'm trying to set up a simple Router Switch with two buttons and two components. I want to make it so that when you press the button, it loads a new component, and includes a React-Transition-Group transition so the component slides in from y:-50. I think I set it up right after reading many posts on the forum here, but it's not working. Each component still has functional onClicks and animations, but the React-Transition-Group transitions don't work on unmount/addEndListener. 

 

Anyone know how to help or what the problem is? Is it a problem with React-Router-Dom interfering?

 

Thanks,

Aaron

Link to comment
Share on other sites

I'm definitely the wrong guy to ask about React-related stuff, but I in my quick glance it looked like it may be a logic issue in your code - you're setting up a timeline, pausing it initially, and calling reverse() on it but the playhead is already at the start, so it can't go backward anymore. You won't see any animation, of course. Did you intend to play() it? If you want to reverse it from the very end, you could call reverse(0) which makes it jump to the end first. 

 

Maybe @Rodrigo or @elegantseagulls has some insight (they're our resident React experts) 

  • Like 2
Link to comment
Share on other sites

Hi,

 

I tried to set an example but I'm a bit short of time.

 

The main problem you're facing is the use of the <Switch> component. Keep in mind that Switch renders the first match it finds for the current path, which means that it will remove the previous route immediately without allowing the <Transition> component to run it's normal course.

 

I found this old sample of using switch with transition group. It has very old dependencies, but looking through the docs in both the router and transition packages, it should work or just require a few minor tweaks:

https://codesandbox.io/s/mqy3mmznn?file=/components/routes.js

 

Now everything has it's pros and cons. Using switch gives you a nice and simple way to handle 404 routes without too much hassle but, as you can see in the code, you have to create the same animation for every route change. Not using switch (for that just comment out the <Switch> tags in your code), gives you the flexibility to go totally nuts in terms of creating different animations for every route, which is not something you see too often, but you have to create a more convoluted way to handle 404 routes.

 

Happy Tweening!!!

  • Like 4
Link to comment
Share on other sites

Hi to everyone,

 

Thank you for the replies. I've read quite a bit of documentation, and, @Rodrigo, your answer was quite clarifying and helpful. I think the hardest part was updating to GSAP 3.x.

 

After reading, learning, playing, etc., I came up with this sandbox: https://stackblitz.com/edit/react-transition-group-gsap-test?file=src/App.js

 

Seems to work well. I just have to play with the transitions.

 

Thank you!

 

Link to comment
Share on other sites

Also, can you tell me what exactly is happening here with gsap and react?

 

 

<Transition
      key={props.location.pathname}
      timeout={500}
      mountOnEnter={true}
      unmountOnExit={true}
      onEnter={node => {
        // first kill all tweens of the target
        gsap.killTweensOf(node);
        const parent = node.parentNode;
        const targetWidth =
          parent.clientWidth -
          parseFloat(getComputedStyle(node.parentNode).paddingLeft) * 2;
        // set the position and properties of the entering element
        gsap.set(node, {
          position: "fixed",
          x: 100,
          autoAlpha: 0,
          width: targetWidth
        });
        // animate in the element
        gsap.to(node, 0.5, {
          autoAlpha: 1,
          x: 0,
          onComplete: completeCall,
          onCompleteParams: [node]
        });
      }} // on enter end
      onExit={node => {
        // first kill all tweens of the target
        gsap.killTweensOf(node);
        const parent = node.parentNode;
        const targetWidth =
          parent.clientWidth -
          parseFloat(getComputedStyle(node.parentNode).paddingLeft) * 2;
        // set the position of the element
        gsap.set(node, {
          position: "fixed",
          width: targetWidth
        });
        // animate out the element
        gsap.to(node, 0.5, {
          position: "fixed",
          opacity: 0,
          x: -100
        });
      }} // on exit end
    >

 

What is the node and how is green sock manipulating it? Locally, when I try this, I get errors saying that Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

 

Is this related to React-Router-Dom? Sorry, I'm not sure I understand the process exactly. I always thought I was supposed to use useRef(example) to animate a node using example.current. But sometimes I use classes or ids to animate a path/node.

 

Thank you for any help!

Link to comment
Share on other sites

  • 2 weeks later...

Hi,

 

I updated the codesandbox sample to use the latest versions of React, Router, Transition Group and GSAP:

 

https://codesandbox.io/s/mqy3mmznn

 

As you can see while is better structured the code is basically a carbon copy of the previous example, so if you're still having issues with this code, honestly it has to be something else, because I didn't had to change anything to make it work, just copy/paste.

 

Happy Tweening!!!

  • Like 2
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...