Jump to content
GreenSock

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

Page transition in React

Recommended Posts

Sure, you can animate pretty much ANYTHING with GSAP. But we don't have the resources to dissect that exact effect and build a whole tutorial for you. It looks like there's an article at https://tympanus.net/codrops/2018/11/12/page-flip-layout/, although they don't really explain everything in detail. 

 

If you have any GSAP-specific questions, we'd be happy to help. 

  • Like 1
Link to post
Share on other sites

Yep, Jack is right. That is a bit complex to do.

 

I didn't checked the article but for what I saw, they're using a simple object on top of each image with the same background color, that hides the images and then is translated to create the reveal effect (at first I thought it could be mask clip, but since it has such a limited browser support they went this route).

 

Also inspecting the demo I found some familiar updates in the inline transitions and it turns out that they're using GSAP for this:

 

https://tympanus.net/Development/PageFlipLayout/js/demo.js

 

Finally for using GSAP with React some fella around here, that has everyone fooled thinking He is good at using React with GSAP, wrote an article about it:

 

https://greensock.com/react

 

Happy Tweening!!!

  • Like 1
Link to post
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.

×