Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
vinu_vijayan

Page transition in reactjs

Recommended Posts

i was trying to achieve the page transition in reactjs just like https://www.reed.be/en/work in this site. When clicking on the image it resizes from the current position to next page. that kind of animation was i looking for. Can anyone help me?. 

1.jpg

2.jpg

  • Like 1
Link to comment
Share on other sites

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

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.
×