scrolltrigger: long scroller with multiple animation triggers

[321dev]

The first codepen shows the working starting point. Just an animation with a scrolltrigger.

See the Pen ZEKJrXO by trogmaniac (@trogmaniac) on CodePen

 

Now i'd like a longer scrollarea (600px) and i want the animation to trigger every 100px.

This is my attempt here:

See the Pen qBRqqQX by trogmaniac (@trogmaniac) on CodePen

 

I don't quite understand why the start of any following triggers are not directly after any previous one. Somehow i suspect that's because of the space that's added by the pinning, but i don't know how to cope with that.

 

 

See the Pen by (@) on CodePen

[GreenSock]

Yeah, that's a tricky one because you're pinning the same thing over and over and that affects the triggering position of subsequent ones. In other words, if you pin something for 100px, it has to push the trigger point of the next one 100px down too because it's basically stationary for that amount of time. 

 

I personally wouldn't keep pinning the same element over and over - I'd pin once and do all my animations in an associated timeline. You can even drop callbacks into a scrubbed timeline like this: 

See the Pen JjNyxgv?editors=0010 by GreenSock (@GreenSock) on CodePen

[mikel]

 

... another option if you want to scrub the rotation too.

 

See the Pen WNjEBpq?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[321dev]

Thanks a lot to both of you for your answers.

 

@GreenSock Just to understand what you've done: You added 6+1 arbitrary entries to the timeline and that lead to the total scroll range to be divided into 6 equal parts?

 

Is there a way to make the animation run  backwards when scrolling up? 

[GreenSock]

4 hours ago, 321dev said:

@GreenSock Just to understand what you've done: You added 6+1 arbitrary entries to the timeline and that lead to the total scroll range to be divided into 6 equal parts?

Not "arbitrary", but yes, equally-spaced so that they just hit at specific increments. I control the pixel distance simply with the end value, like "+=600" means 600 / 6 = 100 each. 

 

4 hours ago, 321dev said:

Is there a way to make the animation run  backwards when scrolling up? 

Sure, just tap into the scrollTrigger's direction:

tl.scrollTrigger.direction > 0 ? tween.restart() : tween.reverse()

See the Pen OJmxNqY?editors=0010 by GreenSock (@GreenSock) on CodePen

[321dev]

@GreenSock thanks, but it plays the animation only once when scrolling upwards.

[GreenSock]

If you want it to jump to the end and play, that's easy - just add a 0 to the reverse():

tl.scrollTrigger.direction > 0 ? tween.restart() : tween.reverse(0)

There are actually a lot of ways you can code this. I'm just offering one here