Layered pinning with Scrolltrigger and long content inside delaying the next panel to show up

[Checkout]

Hi all,

 

So I've created a Scrolltrigger that listens to the botom of a panel so you can actually scroll through the entire content of a panel.

Now once you're at the bottom of one panel, the next one comes in too quick which ends up in missing the animation happening at the bottom of a panel. Can I add something like a scrolling delay at the bottom of a panel where you have to scroll further before the next panel comes in?

 

Current code looks like this:

 

gsap.utils.toArray(".o-scroll-section").forEach((panel, i) => {
        ScrollTrigger.create({
            trigger: panel,
            start: "bottom bottom", 
            pin: true, 
            pinSpacing: false ,
           
        });
    });

Hopefully someone has the answer.

 

Thanks!

Edited January 17, 2023 by Checkout
Question vhanged

[GreenSock]

Since you didn't provide a minimal demo, I'm not entirely sure what you're describing there, but maybe this is what you're looking for?: 

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