Flip page transition animation with ReactJS

[Koriane]

Is it possible to do a gsap Flip animation to do a page transition with ReactJs/NextJs  ?

I am struggling a little bit :p 

If yes can you maybe guide me on how to get started ? 
 

[Rodrigo]

Hi @Koriane and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GreenSock! 🥳

 

What exactly do you have in mind? Have you created anything that resembles what you want to do. This could be a very deep topic to dig into with different alternatives.

 

We have this example of route transitions using Next13:

https://stackblitz.com/edit/nextjs-13cw4u

 

Also I just updated our example using Flip in different routes:

https://stackblitz.com/edit/nextjs-bti25c

 

As you can see that example has a component that checks for route changes and creates a Flip animation for some elements in it without re-rendering. It might not be what you're looking for but without a minimal demo is really hard for us to know exactly what you're trying to do.

 

Let us know if you have more questions.

Happy Tweening!

[Koriane]

Yes perfect it will get me started.

I actually want to reproduce this animation from rezo-zero website. On click on each projects 
https://www.rezo-zero.com/projects/

I think they use the gsap Flip animation but I'm not sure.

Anyway gonna try these examples. 

Thank you