mattdown Posted November 27, 2020 Share Posted November 27, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
mikel Posted November 27, 2020 Share Posted November 27, 2020 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 3 Link to comment Share on other sites More sharing options...
mattdown Posted November 27, 2020 Author Share Posted November 27, 2020 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 comment Share on other sites More sharing options...
akapowl Posted November 27, 2020 Share Posted November 27, 2020 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now