Metaloholic

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!

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

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!