Trying to use ScrollTrigger to animate only on scroll

[Triphys]

I'm having some problems getting scrolltrigger work the way I would like it to. My goal is to have the toggleActions work as they do now, but only when scrolling. Pretty much exactly as it is on https://weareferal.com under their projects section. In my codepen example I have it working almost as I would like to except for the fact that when I cross the startline the animation just keeps on going till the end. Could anyone point me in the right direction? I think that page is made with ScrollMagic, but I would rather use ScrollTrigger if possible.

See the Pen dyGVvjK by triphys (@triphys) on CodePen

[mikel]

Hey @Triphys,

 

Welcome to the GreenSock Forum.

 

The key is

 

scrub

Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.

 

See the Pen ExPwXEa?editors=1010 by mikeK (@mikeK) on CodePen

 

And another version with even / odd

 

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

 

Take a look at batch also.

 

Happy scrolling ...

Mikel

 

[Triphys]

Thank you SO much @mikel! ❤️

Saved my day haha