Consecutive pins

[longstoryshort 4 Likes (Newbie)]

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

[Cassie 5,385 Likes (Superhero)]

Hi there!

 

So I'd probably just make the hero position:fixed and then pin the second section for a while

Something like this? Is that what you're after?

See the Pen poOPZbZ by GreenSock (@GreenSock) on CodePen

[Rodrigo 5,407 Likes (Superhero)]

Hi,

 

You have a syntax issue in your ScrollTrigger configuration:

// Wrong
pinspacing: false,
// Correct camelCase
pinSpacing: false,

Also instead of creating two consecutive ScrollTrigger instances, which certainly opens a can of worms, just create one with no pinspacing, add an extra DOM element that is empty and transparent (you can even play with the z-index in order to have it behind the hero section just in case) and add an extra dummy tween in the timeline. Here is a live example:

See the Pen wvEdxor by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[longstoryshort 4 Likes (Newbie)]

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?

[Rodrigo 5,407 Likes (Superhero)]

1 hour ago, longstoryshort said:

Is there any documentation about it?

Not really, is just one of the ways to add some extra time at a specific point of a Timeline. You can add a label x seconds after the last instance or use a call method to call a function that does nothing or add a dummy tween. I fyou get creative you can definitely come up with more ways, but the main objective is, in this particular case, to extend the duration of the timeline to give extra scrolling space after the rotation animation is completed.

 

Hopefully this clear things up.

Happy Tweening!