Best way to approach timeline control with Scrolltrigger?

[mattdown]

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 November 27, 2020 by mattdown
Update to pens

[mikel]

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 ...

Mikel

 

[mattdown]

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.

[akapowl]

 

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 29fb25bdfceea4cde2d143391913498f by akapowl (@akapowl) on CodePen