toggleClass on target elements within a timeline

[MrChristianL]

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. 

[mvaneijgen]

Your animation code doesn't care what images are in your animation, so you can easily create a demo with your images swapped out, which I suggest if you want a good answer to your question 

 

but what I would do is create a separate timeline with the animation you just want to have play, make that a function and call that function onStart of the scrollTrigger timeline. This way the animation will just start playing no matter if the user is scrolling or not.

[MrChristianL]

I kind of solved my problem. But only "half-way".

I created a simple pen

See the Pen VwyYzKW by MrChristianL (@MrChristianL) on CodePen

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;

[mvaneijgen]

Thanks for the demo, that really helps! 

 

What I have right now is a separate timeline for your images. This is a full timeline and not just a GSAP tween, because you want to have control over it.

 

This timeline is called when the ScrollTrigger `onEnter` is triggered and when `onLeave` is trigged the timeline plays in reverse. These animations run completely on there own and have nothing to do with the scrub animation of your main ScrollTrigger.

 

See the Pen abEzLBE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[MrChristianL]

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!

[mvaneijgen]

I have this based on my first pen 

See the Pen rNpaYar by mvaneijgen (@mvaneijgen) on CodePen

 

or the image being part of the timeline and animating after text-1 with a shorter duration and text-2 animating in at the same time 

See the Pen WNdbXej?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[MrChristianL]

17 minutes ago, mvaneijgen said:

I have this based on my first pen 

 

 

 

or the image being part of the timeline and animating after text-1 with a shorter duration and text-2 animating in at the same time 

 

 

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. 

4 hours ago, MrChristianL said:

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})
  	

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 
 

[OSUblake]

That should work. You may need to use the position parameter to make sure it happens at the time you are expecting.

[mvaneijgen]

Yes that does work, but you'll need to write some logic that shows or hides it based on which direction it scrolls

See the Pen ZEvGWga by mvaneijgen (@mvaneijgen) on CodePen

 

I don't know what the effect is you're going for, but it seems like a lot of hassle. If it can just be part of the timeline it works with just two simple tweens 

See the Pen yLpNORM by mvaneijgen (@mvaneijgen) on CodePen