Jump to content
Search Community

How can make soft flip page?

raana test
Moderator Tag

Recommended Posts

GSAP just animates things ☺️ You need to work out how to create the 'thing' you want to animate. You could possibly do this with SVG and masking and some clever placement of shadows. Or as Jack said - a 3D or canvas solution. GSAP doesn't have a way to affect how elements are rendered

Link to comment
Share on other sites

good job on your demo.


check out turn.js it appears to be a free jquery plugin



Unless you understand 100% what needs to be done to simulate an interactive draggable page curl  like that it will probably be much better to just go with an "off-the-shelf" solution than spend 40+ hours trying to code it and debug it on multiple browsers / devices.


turning a flat div/image into something that curves in 3D space isn't trivial. as you can see in the example above (using the slider or next/back arrows), adding a little gradient (as cassie suggested) in the middle does help a little. 




  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Hi raana, I don't think I understand.


If you are asking if the plugin I linked to can be customized a certain way, you would have to ask the author.


If you are working on your own solution, pretty much anything is possible with JavaScript, and changing direction of something shouldn't be much of a challenge, but again, not really sure what you are asking.

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