Layered pinning after being pinned

[Olav]

Hi all,

I'm trying out some pinning effects and I can't seem to find a solution for one I have in mind. I've taken a good look at all the layered pinning examples but I think this requires something else.

 

 

What I'd like to achieve is that the red element scrubs through an animation. When that animation is finished, it should remain pinned but let the pink element with opacity 0.5 scroll over the red section. What I had in mind was that the pin should remain in place, but when the animation is finished, pinSpacing should be disabled? In any way, can't get it to work properly, does anyone have a suggestion?

 

Thanks in advance!

See the Pen poBaBZZ by olavgit (@olavgit) on CodePen

[Rodrigo]

Hi,

 

I'm afraid that because the way pinning works, applying consecutive pins to the same element cannot be achieved, as far as I know, at least not without some custom logic.

 

This is the simplest way I can think of using sections that have a height of 100vh:

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

 

You have to somehow create a separation between sections that is equal to the amount of scroll of the first ScrollTrigger instance and add that to the second one. In the demo I'm using sections that are 100vh and using relative percentage values for the end trigger config.

 

Hopefully this helps.

Happy Tweening!

[Olav]

Hi,

Thanks for the example, seems to be exactly what I need!