Jump to content
GreenSock

Koriane

Flip page transition animation with ReactJS

Recommended Posts

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 ? :)
 

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

 

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