Page transition in reactjs

[vinu_vijayan 1 Likes (Newbie)]

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

[ZachSaucier 7,152 Likes (Superhero)]

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  

[Shrug ¯\_(ツ)_/¯ 947 Likes (Leader)]

32 minutes ago, ZachSaucier said:

along with something that transitions between your page's content (like Barba.js)

 

Would React users need Barba.js though when they can instead use React Router ?

https://www.google.com/search?q=react+gsap+page+transitions

[Rodrigo 5,407 Likes (Superhero)]

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:

 

Happy Tweening!!!

[vinu_vijayan 1 Likes (Newbie)]

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

[Poul3t 0 Likes (Newbie)]

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  

[OSUblake 18,494 Likes (Superhero)]

No, he never posted a tutorial and we have a Flip plugin now.

 

https://greensock.com/docs/v3/Plugins/Flip

 

[velkas 7 Likes (Newbie)]

Attempting to create a similar effect in a Nextjs application – anyone have an example they could share?

[Rodrigo 5,407 Likes (Superhero)]

@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!!!