[Consecutive pins]

Thank you both! Both options worked but I needed more pins in the #content div so went with the second one.

 

I like the dummy tween technique. I've been looking for something like that for a while. Is there any documentation about it?

[Consecutive pins]

Hi, is it possible to have consecutive scrolltriggers where the first uses pinspacing?

 

The effect I am trying to achieve is the following:

 

Pin the #hero element (with pinspacing) for the duration of the timeline. When that has finished, pin the #hero element (without pinspacing) so that the #content element scrolls over the top of the #hero element

 

Cheers

See the Pen GRXmywz by sleelss (@sleelss) on CodePen

[Pinspacing and order]

That's it. Thanks so much. I thought it must be something annoying like that. And yes, looking back, it wasn't exactly the clearest brief 😅

[Pinspacing and order]

Hi, I'm having trouble with scrollTrigger pin order. The sidebar pin end is calculated before the pinSpacing of the other scrollTrigger is taken into account. I've seen the below link but it looks like they are created in the correct order but it actually doesn't seem to make a difference which is created first. I've tried refreshPriority but that doesn't seem to help. I'm probably just make a stupid mistake but I can't figure out what it is.

 

See the Pen LYJNQzO by sleelss (@sleelss) on CodePen

[staggerTo stagger incremental increase]

Thank you both. V helpful

[staggerTo stagger incremental increase]

Hi,

 

Is it possible using staggerTo to change the stagger value for each iteration so that it increases/decreases.

 

So for example the stagger value would decrease .1 for each element

 

Something like:

 

.staggerTo('element', 1, {autoAlpha: 1},  x -= .1  );

 

Many thanks,