Jump to content
Search Community

ScrollTigger Play/Pause on Repeating Timeline

Sites Built Fast test
Moderator Tag

Recommended Posts

I've searched through the forms and can't seem to find this documented anywhere. I have figured out how to use ScrollTrigger to play a timeline only once "start" point has been reached, however I also need to be able to pause the (infinite repeating + yoyo) timeline once the "end" point has been reached.

 

I attempted to recreate a simple demo in Codepen, however for some reason the "start" and "end" points are way off (you will notice that the ScrollTrigger target is #div2, with start "top top" and end "bottom top", however, the start point appears at #div1 top and endpoint at #div2 bottom). I'm not sure what's going on there.

 

Please help!

See the Pen wvMLEmM by openowlnight (@openowlnight) on CodePen

Link to comment
Share on other sites

3 hours ago, mikel said:

Hey @NightOwl,

 

The 'key':   trigger: target

 

I added some toggleActions

 

Happy scrolling ...

Mikel

 

Gosh, sometimes I really think I need better glasses. You are a lifesaver. Thank you, Mikel!

 

So for future reference, to control a repeating animation with ScrollTrigger, use toggleActions. 👍

  • Like 1
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.
×
×
  • Create New...