Timing for multiple scrolltriggers?

[joeybab3]

I've been at this for a few hours and it just seems that I'm probably misunderstanding the start/end parameters in some way...

My goal is to have it so that the SVG arc scrolls into view, pins to the center, THEN the squares start moving, then the squares finish their movement, then the arc resumes scrolling down to the next section.

 

For whatever reason no matter what combination of start/end I try the animation either runs a little early/late/too fast/something else completely off.

 

start: `top center-=${i * 100}`,
end: `bottom center-=${i * 100}`,

Seems to produce the closest to what I want, just with the start/end a little off.

 

Logically I want to say it should be center center-=i and bottom center-=i but that causes weird behavior as well.

 

See the Pen XWyZeOO by joeybab3 (@joeybab3) on CodePen

[akapowl]

 

Welcome to the forum, Joey.

 

Getting things set up for ScrollTriggers in forEach loops for multiple elements to tween in succession can be a bit tricky, especially calculating the proper start - but what you could do instead is just create one ScrollTrigger that pins your scene e.g. in a timeline, and add a tween on your ".case" elements to it with a stagger applied to that tween; that way you theoretically wouldn't have to calculate anything.

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

 

[joeybab3]

4 hours ago, akapowl said:

 

Welcome to the forum, Joey.

 

Getting things set up for ScrollTriggers in forEach loops for multiple elements to tween in succession can be a bit tricky, especially calculating the proper start - but what you could do instead is just create one ScrollTrigger that pins your scene e.g. in a timeline, and add a tween on your ".case" elements to it with a stagger applied to that tween; that way you theoretically wouldn't have to calculate anything.

 

 

 

Thanks for this! I will look into "stagger", must have missed that when I was reviewing the scrolltrigger options.

[akapowl]

 

26 minutes ago, joeybab3 said:

Thanks for this! I will look into "stagger", must have missed that when I was reviewing the scrolltrigger options.

 

Happy to help. Just to make sure, there is no misunderstanding here; stagger is not a property of ScrollTrigger.

 

It is a property of tweens and totally independent of ScrollTrigger.

 

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

 

You can read more about it here:

 

https://greensock.com/docs/v3/Staggers

 

 

And one more thing:

 

You shouldn't apply CSS transitions on properties of elements that you are going to tween on or in any way manipulate via GSAP - that will cause conflicting behaviour; which is why I commented out your transition and transform on hover on the .case elements in CSS in the demo above.

 

[joeybab3]

On 7/14/2023 at 9:19 AM, akapowl said:

Happy to help. Just to make sure, there is no misunderstanding here; stagger is not a property of ScrollTrigger.

It is a property of tweens and totally independent of ScrollTrigger.

Yeah, that was me misspeaking, my bad. 

 

On 7/14/2023 at 9:19 AM, akapowl said:

You shouldn't apply CSS transitions on properties of elements that you are going to tween on or in any way manipulate via GSAP - that will cause conflicting behaviour; which is why I commented out your transition and transform on hover on the .case elements in CSS in the demo above.

Thanks for the heads up, that probably explains a lot of the weirdness I've been seeing.