rvp Posted December 14, 2021 Share Posted December 14, 2021 Hey guys, This is a general question - I am trying to understand how the position attribute is converted to scroll distance when a timeline is hooked up to a scrubbed ScrollTrigger. So if we take a look at the CodePen below, we first show the "home page" and then 10 seconds later we hide it to the side. tl.from('.page-home', { xPercent: -100 }).to('.page-home', { xPercent: 100 }, "+=10") This is meant to work with a time delay (i.e. wait 10 seconds before moving the page to the right) but when apply a ScrollTrigger with the scrub option enabled, our animation is now linked to the scroll position so the +=10 is no longer a time delay. Could someone please explain how is the "+=10" position attribute converted to a scroll distance / pixels? I'm trying to understand if this is the right approach to tell ScrollTrigger "wait X pixels in this position before continuing" or if I'm meant to use something else. Your help would be much appreciated! See the Pen zYENZYE by RVP22 (@RVP22) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted December 14, 2021 Solution Share Posted December 14, 2021 Hey @rvp Sure thing! Say you had the following timeline scrubbed over 1000px. It's 3 seconds long so let's split it into thirds. ScrollTrigger.create({ animation: tl, start: 'top top', end: '+=1000', scrub: true, }); tl.to('.one',{ duration: 1, rotate: 360 }) .to('.two',{ duration: 2, rotate: 360 }) The first tween would last 1/3 of the distance ( 333.33px ) and the second would last 2/3 of the distance ( 666.66px ) one two |__________|____________________| 1/3 2/3 Let's add a delay - now the timeline is 4 seconds long - let's split it into quarters. ScrollTrigger.create({ animation: tl, start: 'top top', end: '+=1000', scrub: true, }); tl.to('.one',{ duration: 1, rotate: 360 }) .to('.two',{ duration: 2, rotate: 360 }, '+=1') The first tween would last 1/4 of the distance ( 250px ) then there would be a pause for 1/4 of the distance (250px) then finally the second tween would play for half of the distance (500px) one pause two |__________|__________|____________________| 1/4 1/4. 1/2 Hope this helps. Think of time as ratios. fyi - the default tween duration is 0.5s if not specified. Also, if you have easing curves that aren't linear applied it can sometimes look a little off. 2 Link to comment Share on other sites More sharing options...
rvp Posted December 14, 2021 Author Share Posted December 14, 2021 Thank you very much @Cassie! Very informative reply - all is clear now! 1 Link to comment Share on other sites More sharing options...
Cassie Posted December 14, 2021 Share Posted December 14, 2021 Happy to help! Link to comment Share on other sites More sharing options...
GreenSock Posted December 14, 2021 Share Posted December 14, 2021 One technique to make it easier or more flexible is to use labels... tl.add("label1") .to(".one", {...}) .add("label2") .to(".two", {...}) .add("label3") .to(".three", {...}); // now you can just use this function: function labelToProgress(tl, label) { return tl.labels[label] / tl.duration(); } console.log(labelToProgress(tl, "label2")); Have fun! 2 Link to comment Share on other sites More sharing options...
rvp Posted December 15, 2021 Author Share Posted December 15, 2021 Awesome - thanks for the tip @GreenSock!! 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