raana Posted January 2, 2022 Share Posted January 2, 2022 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 Link to comment Share on other sites More sharing options...
GreenSock Posted January 2, 2022 Share Posted January 2, 2022 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. 1 Link to comment Share on other sites More sharing options...
raana Posted January 3, 2022 Author Share Posted January 3, 2022 Yes, I want the element to be curved when turn. gsap has no solution? Link to comment Share on other sites More sharing options...
Cassie Posted January 3, 2022 Share Posted January 3, 2022 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 More sharing options...
raana Posted January 3, 2022 Author Share Posted January 3, 2022 @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 More sharing options...
Carl Posted January 3, 2022 Share Posted January 3, 2022 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. 4 1 Link to comment Share on other sites More sharing options...
raana Posted January 3, 2022 Author Share Posted January 3, 2022 @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 More sharing options...
Carl Posted January 3, 2022 Share Posted January 3, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now