Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
NightOwl

ScrollTigger Play/Pause on Repeating Timeline

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

Share this post


Link to post
Share on other sites

Hey @NightOwl,

 

The 'key':   trigger: target

 

I added some toggleActions

 

See the Pen pogMJMq by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

  • Like 3
  • Thanks 1

Share this post


Link to post
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

Share this post


Link to post
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.

×