Align scrollTrigger end with the start of next trigger on same id

[PixeledCode]

Hi,

I'm trying to create a scrolltrigger where I can only target the heading of before a paragraph. On each trigger, I am supposed to add class to some other element. but currently, since I am only targeting h3 tags, scrolltrigger ends just as soon as it starts, as you can see in demo. Since all the trigger belong to same id, I was hoping if there was some way to align end of each trigger just before the start of next one?

 

Thank You

See the Pen VwbXGrE by PixeledCode (@PixeledCode) on CodePen

[Cassie]

22 minutes ago, PixeledCode said:

On each trigger, I am supposed to add class to some other element. but currently, since I am only targeting h3 tags, scrolltrigger ends just as soon as it starts, as you can see in demo

This shouldn't be an issue, there's plenty of time to add a class to a different element, you can use the onToggle callback to run some custom logic.

If you still want to space them out, you can use start and end positions to move the markers - You could also use different start and end triggers?

Something like this?

See the Pen 72af9d8cddc65f99a8e25b3e2be4d7c7?editors=1011 by cassie-codes (@cassie-codes) on CodePen

[PixeledCode]

32 minutes ago, Cassie said:

This shouldn't be an issue, there's plenty of time to add a class to a different element, you can use the onToggle callback to run some custom logic.

If you still want to space them out, you can use start and end positions to move the markers - You could also use different start and end triggers?

Something like this?
 

 

Thanks Cassie, that's exactly what I was looking for. I should definitely go through Carl's GSAP course again haha