Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Best way to approach timeline control with Scrolltrigger?

Recommended Posts

I've been trying to work out the best / easiest way to control a timeline animation so that I have full control over how much of the user scroll makes the animation fade in, stay visible for a while and then fade out, all in relation to scroll.

In this example, it's broken because I'm attempting to fade in using a 'from' tween and then fade out again using a 'to' tween. As you'll see, the white boxes just disappers instanly instead of fading back out again.

I created another pen here which uses just one timeline to achieve the same desired effect by using a realtive position parameter at the end but the problem then is that I can't easily control how quickly the item fades in, stays visible and then fades out as the timelime is running based on that relative parameter at the end to create the visible duration in the middle. If I increase the '2' number at the end, the box just fades in a lot quicker, stays for longer, then fades out quicker again.

What's the best way to approach this?

Thanks in advance for any tips or advice.


The first pen achieves the desired effect but doesn't give me much control over how much of the scroll dtermines the fade in and the 2nd pen is the broken one where I'm attempting to do it with 2 different timelines. Getting the 2nd one to work would be my favoured option as I can then fine tune the trigger points and possible slight adjustments to the 'out' animation.

See the Pen MWjWXyW by mattdown2478910 (@mattdown2478910) on CodePen


See the Pen dypyeLv by mattdown2478910 (@mattdown2478910) on CodePen

Edited by mattdown
Update to pens
Link to post
Share on other sites

Hey @mattdown,


From the DOCs How does duration work with scrub: true?


If you change the duration of all the tweens to the same number, say 1, then the percentages would all be equal: 100% -> 66%, 66% -> 33%, 33% -> 0%. This is because the total duration is 3, so ⅓ is 33%.

In other words, the duration values don't matter as much as the proportions of the duration of each tween compared to the total time of the timeline.


See the Pen PoGoaMr?editors=1010 by mikeK (@mikeK) on CodePen


Happy scrubbing ...



  • Like 3
Link to post
Share on other sites

Thank Mikel, that all makes sense now.

I must admit, I hadn't read that aspect of the docs yet as I'm a bit new to Scrolltrigger.

Link to post
Share on other sites


Just as an additional sidenote:


You would not have to use absolute values for the position parameter and could keep it relative instead if you wanted.


See the Pen OJRJBbB by akapowl (@akapowl) on CodePen


  • Like 2
Link to post
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.