ScrollTrigger Scroll Overlay Problem

[emot1onz]

Hi there,

i'm looking for a solution to get a div scrolling above a pinned fullscreen image/video.

If the bottom of the content div is fully visible the pinned image should scroll up and reveal the next section.

I have it working with two separate sections, but some things on top are causing errors + it would be awesome if the content has a scrub animation on it.

It should work like on this porsche taycan website (https://web.archive.org/web/20200609004443/https://www.porsche.com/germany/models/taycan/taycan-models/taycan-4s/).

Thanks for your help!

See the Pen dyOORBd by emot1onz (@emot1onz) on CodePen

[ZachSaucier]

Hey emot1onz and welcome to the GreenSock forums.

 

I would put the image/video inside of the container for a section. Make sure it's absolutely positioned but that the container is still taller than the viewport. Then pin the image/video from start: "top top" to when its bottom is at the bottom of the container (potentially end: "bottom bottom") and set pinSpacing: false.

 

Then you can create separate animation and ScrollTrigger for the gradient fading if you need to.

 

FYI A scrub on a pin doesn't make much sense. You could apply it to the gradient animation ScrollTrigger if you want to though.