[Using staggered animations with scrub]

Hi!

 

After a while of searching, I finally found something that could help me out with the animation I want to achieve. However, the only thing missing for it to match my needs is scrub: true, instead of the animations playing right away. I've tried a bunch of stuff already, but I'm simply not able to add a scrub to this batched and staggered animation provided in the codepen. Why is that?

 

Should I use a different way of animating my objects (which all share the same class). Like a loop instead of batch?

 

Cheers!

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

[Fade in onEnter, pin for a while, and then fade out onLeave?]

Hey and thanks!

 

Wow. Never thought about a fix like that haha! I’ll give it a try. Thank you!

[Fade in onEnter, pin for a while, and then fade out onLeave?]

Hi!

 

I tried creating a codepen but didn't get the hang of it for some reason. So I'll do my best to explain my scenario here:

Let's say I have a box a bit down the page. 
 

As I scroll down, and the box enters the viewport. I want the box to move up and fade in at the same time. So basically a gsap.to() with y:0 and opacity: 1. (the box is already set with y:500 and opacity:0)

 

But when the box reaches the center of the viewport, I want it to be pinned for... let's say 500px. So far so good. But I then want to make it move up and fade out upon leaving the viewport as well, and this is the part where I think the pin is making my life hard.

 

This is the code I've got.

//BOX code
        ScrollTrigger.create({
            trigger: "#boxContainer",
            start: "center center", 
            end: "+=500",
            pin: "#boxContainer",
            markers: false
        });
        gsap.set(".box", {
            opacity: 0,
            y: 800
        });
        gsap.to(".box", {
            opacity: 1,
            y: 0,
            scrollTrigger: {
                trigger: ".box",
                start: "0% 100%",
                end: "50% 50%",
                markers: true,
                scrub: true
            }
        });
        gsap.fromTo(".box", {
            opacity: 1,
            y: 0
        },{
            opacity: 0,
            y: -800,
            scrollTrigger: {
                trigger: ".box",
                start: "center 40%",
                end: "100% 0%",
                scrub: true,
                markers: true,
            }
        });

There must be a more simple way to do this, right? Like a timeline? Can I tell an object to be pinned in a timeline?

Cheers!