Layered pinning delay when more content is below

[jackkemm]

Hi there,

 

I am using the layered pinning effect for some sections, but have run into an issue with my text overlay animation when trying to delay the pins from moving on.

 

I used this example which sets an end value on the ScrollTrigger, and adds a margin to offset the pins I assume:

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

 

For my animation to work, the layered pinning works perfectly, but i'm not 100% sure with this offset to allow for the delay, how to make my overlay text animate in & out correctly.

 

The idea is it scrolls up into view from 0 to 1 opacity, then continues off back to 0 opacity, but the positioning looks way off, and it's super fast.

 

There is also the need for it to be adaptable as there can be more than one content section within a pin - this I can work out i'm sure once I have figured out the correct spacing/offset.

 

I have attached a simple example built around it being used as a module/block to show where I am at with it.

 

Here is an example of what I managed to do without layering the pins which works how i want it to - the image container is pinned while the text scrolls naturally over the top:

See the Pen wvEqVYE by jackkemm (@jackkemm) on CodePen

 

Any thoughts on this?

 

Thanks,

Jack

See the Pen gOdxJgZ by jackkemm (@jackkemm) on CodePen

[Rodrigo]

Hi,

 

I think you're overcomplicating this a bit. It would be simpler to create create the sections and just run a series of loops on each in order to create the animation for each one.

 

Here is a simplified approach of how I'd do it:

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

 

Hopefully this helps.

Happy Tweening!

[jackkemm]

Hi @Rodrigo,

 

This is amazing. I think I got stuck in a rut and went way off-piste lol.

 

How would I account for the layered pinning here though? And pin long enough to see all the text?

 

I have added in the layered pinning check pinSpacing: index === sections.length - 1 to remove the pin spacing from all but the last one. But this prevents the items from being visible now ?

 

Thanks,

Jack

[Rodrigo]

Hi,

 

I don't think I follow what you mean with the layered pinning, also why are you removing the pin space, that kind of defeats the purpose especially if one section comes right after the other.

 

I added an extra section after each pinned section and I'm not seeing any extra space:

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

 

Most likely this is related to your HTML/CSS, but without a minimal demo there is not much we can do, so please try to create one that shows the issue you're having.

 

Happy Tweening!

[jackkemm]

Hi @Rodrigo,

 

Sorry I have forked your example and updated it to use the layered pinning to best show below.

 

Removing the pinSpacing is to get this effect where the next section overlays the previous one:

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

 

So I tried to do the same here but no luck sadly - I tried increasing the end value but no dice

See the Pen abaLqrE by jackkemm (@jackkemm) on CodePen

 

Thanks,
Jack

[Rodrigo]

Hey Jack,

 

I think the best approach is to rethink the entire HTML and CSS of this in order to achieve that in a rather simpler way.

 

I took the example and created a container with overflow hidden for all the sections and then set each section's position to absolute so they sit on top of each other, then I moved all the sections except the first one to the bottom of their container, then just added an instance for each section in the timeline, before the section's text animations.

 

Here you can see the result:

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

 

Hopefully this is closer to what you're looking for.

Happy Tweening!

[jackkemm]

Hi @Rodrigo,

 

Tested this out and works perfectly, thank you very much for the help!

 

Jack