MrChristianL

Well it's still not what I'm trying to achieve unfortunately ? The second one, with the images inside the timeline is what I need. But I need the image to fade in without the scroll basically. So maybe a way to add a class to the images instead? Kind of like I wrote in my first post. Edit: If I could skip the .to('image-2') animation in your second codepen, and instead add a toggleclass to an element, that should solve it. But I've tried a simple .add( function(){ jQuery('.tt-screenshot-4').toggleClass('active'); }) but that didn't work

Hmm, that’s kiiiind of what I’m after. however. I don’t really want it to play all the way through on enter. what I’m trying to achieve is to have one image-1 visible from the start, when the first text is done playing, i want the image-2 to be visible, etc. thank you for helping me!

I kind of solved my problem. But only "half-way". I created a simple pen https://codepen.io/MrChristianL/pen/VwyYzKW As you can see, I diverted from the idea of adding a class. Instead I fire a gsap.to() in the timeline. The new problem that I stumbled upon is that I want it to do everything backwards if the user scrolls up again. but I can't seem to add toggleActions or anything. So the image fades in when the first text is done animating, but if I scroll back, I want the second image to go back to opacity: 0;

Hi, I've been trying to figure out how to make an animation that is basically a timeline. Due to secrecy I can't really show the animation. But it's really easy to explain the issue. I have two columns. To the left, I have a bunch of images stacked over each other. (they will change by giving them opacity: 1. ) On the right, I have some text blocks. I want to sync each textblock with the correct image to be shown. let tl = gsap.timeline({ scrollTrigger: { trigger: "#timelineSection", start: "center center", end: "+=2500", scrub: 0.5, pin: true, } }); tl .addClass?//Add a class .active to the correct image, that gives the image opacity 1 .to(".text-1", {opacity: 1, y:0}) //fade in the correct text with scrub .addClass?//Add a class .active to the next image, that gives the image opacity 1 .to(".text-2", {opacity: 1, y:0}) Why I want to add a class to the image instead of just animating it within the timeline is because I want the opacity animation of each image to NOT scrub. The image should fade in regardless if I the user stops scrolling or something. So basically, fade in an image by adding the class .active, which contains opacity: 1; and a duration etc. And it should just play. But then you have to scroll through the text animation. When the text is done animating, the class .active gets added to the next image in line. I can't seem to find a way to toggle a class on a specific element in a timeline with GSAP + ScrollTrigger? The same effect can be found here: https://www.apple.com/airpods-max/ if you scroll down to the picture attached.