Syed Shehroz Posted April 13, 2023 Share Posted April 13, 2023 please some body help me I have an book flipping animation everything is working fine but the problem is i want to add gsap scrollTrigger in it and i can't do it my self i want that when this book section appear section stop pin : true type thing i guess and the pages flip on scroll See the Pen qBJbBeV by S-Shehroz (@S-Shehroz) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted April 13, 2023 Share Posted April 13, 2023 Hi @Syed Shehroz. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general "how do I recreate this cool effect?" tutorials and do it all for you. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. It looks like currently you've got the flipping wired up to a click handler, so I'd recommend first just working on getting that page flipping animation done with GSAP instead of CSS transitions. Then, once you're happy with that animation, THEN you can wire it up to ScrollTrigger very easily and apply a scrub to it. Baby steps. Get started with GSAP here: If you get stuck doing that animation, feel free to post back here with a minimal demo and we'd be happy to answer any GSAP-specific questions. 👍 Link to comment Share on other sites More sharing options...
Syed Shehroz Posted April 13, 2023 Author Share Posted April 13, 2023 thank you so much Link to comment Share on other sites More sharing options...
Syed Shehroz Posted April 13, 2023 Author Share Posted April 13, 2023 can you somehow turn the filipping effect into scroll ? Link to comment Share on other sites More sharing options...
Rodrigo Posted April 13, 2023 Share Posted April 13, 2023 Hi, Sure thing, keep in mind that ScrollTrigger is just a way to control GSAP instances based on the scroll position, nothing more. If you make your flipping effect into a GSAP animation, you can definitely tied it up to a ScrollTrigger instance. You can use either scrub true or give it a value. Take a look to the ScrollTrigger docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger Hopefully this helps. If you have more questions let us know. Happy Tweening! 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