Timeline position attribute when using ScrollTrigger with the scrub enabled

[rvp]

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

[Cassie]

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.

[rvp]

Thank you very much @Cassie! Very informative reply - all is clear now!

[Cassie]

Happy to help!

[GreenSock]

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!

[rvp]

Awesome - thanks for the tip @GreenSock!!