Jump to content
Search Community

Time a second animation in step with scrolltrigger

dogzzz test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

@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! 




  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...