Time a second animation in step with scrolltrigger

[dogzzz 10 Likes (Newbie)]

Hi there,

 

I have an image sequence of 75 images. I want the first text to be full opacity for 33% of the scrolltrigger length. Then I want the opacity of the first text to fade to 0 as the second text fades in and I want the second text to stay on for the next 33% (it may take 1% for the changeover) and then I want that to fade out and for the third text to fade in and remain on screen.

 

How can I control a second animation in line with an image sequence scrolltrigger on the first? I know scrolltrigger swaps time for scroll so I want to use that to time the text relative to the scroll sequence so I can control when text comes in and out (I'm using the opacity property to do this)

 

Many thanks

See the Pen GRXGqpW by zrrrrr (@zrrrrr) on CodePen

[Rodrigo 5,382 Likes (Superhero)]

Hi,

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[dogzzz 10 Likes (Newbie)]

That looks really good , thank you. 
 

Would that work if you had more than 3 blocks of text? I wondered how to deal with that scenario 

 

There was one other scenario as well; if you wanted to not split it exactly but perhaps have the first one say 20% then the next one 60% then the final one the remaining 20% of the duration , how could the code be adapted for that? 
 

Many thanks

[mvaneijgen 1,709 Likes (Superhero)]

@dogzzz what have you tried yourself already? Adding a new block of text seems to just work out of the box. 

 

Right now this is build with a fancy loop, but if you want more control ditch the loop and manually write your timeline with the timings you want and some position parameter sprinkled in.

 

tl.to(text1, { opacity: 0 }, 1);

tl.to(text2, { opacity: 1 }, "<");

tl.to(text2, { opacity: 0 });

tl.to(text3, { opacity: 1 }, "+=1"); // Take a look at the position parameter

... ect 

 

My recommendation would be to remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. Also note that ScrollTrigger converts the total duration of the timeline to the total scroll distance, so to get exactly 20% or 60% will require some maths, if a timelines total duration is 10 seconds 20% would at the 2 seconds mark. Hope it helps and happy tweening! 

 

 

 

[dogzzz 10 Likes (Newbie)]

Fantastic thank you!

 

Was able to time it out setting a duration for the image sequence and then dividing the text up based on that with the position parameter 

 

the toArray util is quite a nice little feature to know!

 

- Dogzzz