Jump to content
Search Community

Page transition in reactjs

vinu_vijayan test
Moderator Tag

Recommended Posts

Hey Vinu and welcome to the GreenSock forums. 

 

To do that sort of transition you will need to use the FLIP animation technique along with something that transitions between your page's content (like Barba.js). GSAP has a handy FLIP helper function to help with it.

 

I am actually creating a tutorial on doing this effect right now. If you can hold out a week or so it should be on our learning section. You can follow it to receive updates :) 

  • Like 5
Link to comment
Share on other sites

On top of Zach's great advice, in the React side of things you'll need to use either React Transition Group, or programmatically update your routes using React Router Dom in order to get that effect. If you look carefully, you'll notice the route changes before the animation starts, so in this particular case the deveopers used transition group with react router (as Shrug already mentioned). Now the sample in react router's page is a bit convoluted, specially if you're just starting. This is a bit simpler and even though it uses class components and GSAP V2.x syntax, it should be easy to update:

 

https://codesandbox.io/s/mqy3mmznn

 

I haven't had time to update all the React related samples, but it is on my todo list:

giphy.gif

 

Happy Tweening!!!

  • Like 7
Link to comment
Share on other sites

11 hours ago, ZachSaucier said:

Hey Vinu and welcome to the GreenSock forums. 

 

To do that sort of transition you will need to use the FLIP animation technique along with something that transitions between your page's content (like Barba.js). GSAP has a handy FLIP helper function to help with it.

 

I am actually creating a tutorial on doing this effect right now. If you can hold out a week or so it should be on our learning section. You can follow it to receive updates :) 

Thanks for the quick reply.. happy to hear that you are creating a tutorial on it. Looking forward to it..

Link to comment
Share on other sites

  • 1 year later...
On 8/13/2020 at 6:13 PM, ZachSaucier said:

Hey Vinu and welcome to the GreenSock forums. 

 

To do that sort of transition you will need to use the FLIP animation technique along with something that transitions between your page's content (like Barba.js). GSAP has a handy FLIP helper function to help with it.

 

I am actually creating a tutorial on doing this effect right now. If you can hold out a week or so it should be on our learning section. You can follow it to receive updates :) 

Hey Zach, I was wondering if you ever got around to posting this tutorial ? I've beens stuck trying to make this effect for a few days and I couldn't find it in the learning section ? Thanks in advance :) 

Link to comment
Share on other sites

  • 5 months later...

@velkas

 

Please check this post in a previous thread on the subject:

 

Now the sample is using Next 11.x, but I doubt that much has changed in version 12 that could affect the way this works. If something is not working properly please let me know.

 

The animation code is in the Layout component:
https://github.com/rhernandog/next-gsap-transitions/blob/master/components/layout.js

 

Happy tweening!!!

 

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