Jump to content
Search Community

Page transition in React

kresogalic test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 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.
×
×
  • Create New...