Book Flip animation on gsap

[Syed Shehroz]

 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

[GSAP Helper]

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

[Syed Shehroz]

thank you so much 

[Syed Shehroz]

can you somehow turn the filipping effect into scroll ?

[Rodrigo]

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!