Jump to content
GreenSock

raana

How can make soft flip page?

Recommended Posts

Thanks for being a Club GreenSock member, @raana

 

Are you saying that you want the "pages" (elements) to curve or something as they turn? That's unrelated to GSAP - if you want to bend things like that you'd probably need a 3rd party canvas library like Three.js or PixiJS. It's rendering-related. 

  • Thanks 1
Link to comment
Share on other sites

Yes, I want the element to be curved when turn. gsap has no solution?

Link to comment
Share on other sites

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

@Cassie

How can I do this with the help of pixijs?
I did a search on pixijs.io , but it confused me.

Link to comment
Share on other sites

good job on your demo.

 

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

http://www.turnjs.com/#samples/magazine3

 

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

 @Carl

Thank you very much, this helps a lot.
Do you think it can be change right to left?

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