Animation doesn't stop outside of ScrollTrigger area

[kabocreative]

Hi!

 

I've got a repeating animation working beautifully, but I only want it to play when inside the ScrollTrigger boundaries.

 

Currently it doesn't start until it enters the ScrollTrigger start boundary, but then it all goes wrong and doesn't stop when scrolling out of the boundary.

 

I'm pretty sure the issue lies somewhere in the fact the animation is set to repeat, but I've no idea how to resolve that.

 

As always any help is veeeeeery much appreciated

See the Pen Baqjzqv by kabocreative (@kabocreative) on CodePen

[mvaneijgen]

I would create a timeline of that repeating animation and set it to paused: true and then use the callbacks of the ScrollTrigger to .play() or .pause() the timeline when you want to. Check the ScrollTrigger docs for more info. Hope it helps and happy tweening! 

 

callback system including onEnter, onLeave, onEnterBack, onLeaveBack, onToggle, onUpdate, onScrubComplete, and onRefresh.

 

See the Pen gOBPLmM?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

[kabocreative]

Thank you mvaneijgen!!! Perfect solution