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.