[Extending pin duration while having the 'pinSpacing: false' effect]

I see, that already helps a lot. Thank you so much for the help and the examples.

[Extending pin duration while having the 'pinSpacing: false' effect]

Hi! I'm working in a page that should have a crossfade effect when trasitioning from one section to the next, while also have some animations on each section when they are pinnned. I understand that the usual way of setting up such a page is to use position: absolute; to overlay each section and then just control the visibility of each through alpha/opacity using the ScrollTrigger plugin. Unfortunately this would be fairly complicated to set up in this page and as such a last case resort.

Is there any way to achieve such and effect without relying on absolute positioning?

At first I thought I might be able to pin an element, play all animations of the section, and then "re-pin" it with pinSpacing: false, let the next section come under  the current pin (possibly manipulating the z-index of each section through .set( )), and then do the fade. No luck so far though.

If I could have both the padding of pinSpacing: true and after that the overlay effect of pinSpacing: false, I could probably figure out the rest. The anexed codepen just give you an idea of the document structure and will likely serve as a base for further discussion.

See the Pen eYvOKpg by mamotromico (@mamotromico) on CodePen