Simple page transitions

[MarkGATX]

Hey everyone. I'm new to React and Greensock and I just can't seem to figure out a simple transition. I've checked the forums and spent hours on Google but nothing seems to work. I'm hoping someone here can help out.

 

I've got a React site that changes the main element with navbar clicks firing the handlePageChange function and passing in the new page. I just want a smoother transition between the current page and the new page but I can't seem to get anything to work. I was hopeful when I found out I need to take React out of strict mode that it would solve some problems, but no luck.  I'm sure there's a very simple solution that I'm just missing in my inexperience. 

 

I recognize the gsap animation I've included won't work since I haven't defined what oldPage is in my script. I've tried so many permutations I wasn't sure what to put in the small demo. Maybe that's the ultimate question: how do I define the element to be animated when it's an entire React component? Maybe?

See the Pen MWXZYKL by MarkGATX (@MarkGATX) on CodePen

[Rodrigo]

Hi @MarkGATX and welcome to the GreenSock forums!

 

If you are just starting with React, we strongly recommend you to take a peek at our Getting Started with GSAP & React guide, I think you'll find it super useful:

 

As for creating page transitions with GSAP in a Ract app, we recommend using React Router and React Transition Group to simplify the whole process and worry only about the GSAP side of things (Router and Transition Group take care of the rest). Here is a super simple example of an App using this setup:

https://codesandbox.io/s/gsap-page-transitions-in-react-c9ioz0

 

Hopefully this is enough to get you started. Let us know if you have more questions.

 

Happy Tweening!