How can make soft flip page?

[raana]

Hello
I'm going to make a digital book like a flipbook. By looking at the tutorials, I was able to make a typical right-to-left example, but the pages are not as soft as the pages of a real book.

 

https://codesandbox.io/s/flipbook-rtl-k8w8f?file=/src/App.js:845-849

 

[GreenSock]

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. 

[raana]

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

[Cassie]

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

[raana]

@Cassie

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

[Carl]

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. 

 

 

 

[raana]

 @Carl

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

[Carl]

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.