Remove travel distance between two pinned areas, to give illusion of stacking

[Max Hart]

I'd love some help here if possible - i'm getting more comfortable with ScrollTrigger and pinning, but pinning specifically is still a little hard to master.

 

Currently, i have two slides with pinned ScrollTrigger animations - and these slides pin for the duration of the animation, however there's still the 'travel time' of scrolling slide 2 to the top of the viewport after slide 1's animation is complete.

 

I often see other websites (this is a great example of what i'm trying to achieve: https://kzero.com/) that are able to have slide 2 readily at the top of the viewport as soon as slide 1's animation has been completed; giving the illusion of the slides being 'stacked', but still being controlled via scroll.

 

What's the best way to achieve this? Initially i thought absolute positioning, but that would cause problems if the slide's content had a greater height than the viewport.

 

Any help appreciated!

See the Pen PovMpVW by maxhart (@maxhart) on CodePen

[mvaneijgen]

A time back I've made a guide how to create such kinds of stacking cards effects and what the logic is behind them, check it out

 

 

It mainly has to do with getting the cards all stacked right on top of each other and then creating the animation without any scroll in them. When you then have the animation prefect you can hook ik up to scroll. Check out the post and see if you can impotent it for your effect, if you need more inspiration check the Codepen Collection at the end of the post. Hope it helps and happy tweening! 

[Max Hart]

4 hours ago, mvaneijgen said:

A time back I've made a guide how to create such kinds of stacking cards effects and what the logic is behind them, check it out

 

 

It mainly has to do with getting the cards all stacked right on top of each other and then creating the animation without any scroll in them. When you then have the animation prefect you can hook ik up to scroll. Check out the post and see if you can impotent it for your effect, if you need more inspiration check the Codepen Collection at the end of the post. Hope it helps and happy tweening! 

Thanks @mvaneijgen! That's a neat guide, nice work. I'll play around with the approaches and see if i can get things working how i want them to.