Getting a timeline to launch using ScrollTrigger, then reset and replay if scrolled back into

[sam_tween_journeyer]

I've fiddled with this for a while, to the point of dumbness, I'm now redesignated 'grouchTrigger' from an id to a class to see if I can get my desired behaviour.

 

So far as I can tell the ScrollTrigger isn't triggering, the animation just plays immediately, possibly after the Triggers delay.

 

What's the correct way of achieving this?

 

Thanks

Sam

See the Pen oNodBGa by Sam654657987 (@Sam654657987) on CodePen

[akapowl]

Hello Sam.

 

First and foremost you'll want to load GSAP and ScrollTrigger, which you seem to have forgotten in your codepen demo.

 

Then you'll also need some scrollable space to begin with - I added some spacers to your demo.

 

When using ScrollTrigger as an object inside a tween/timeline, there it is supposed to be scrollTrigger in camelCase - you wrote ScrollTrigger.

 

Also, there is no need for setting once to false if you don't want it to trigger once only, as that is the default. And if you want to use once: true, you'll want to put it inside the scrollTrigger object, not on the timeline itself.

 

I hope that helps a bit.

 

See the Pen ExbLZQE by akapowl (@akapowl) on CodePen

 

[sam_tween_journeyer]

Brilliant, all solved! Cheers, x Sam