Timeline position attribute when using ScrollTrigger with the scrub enabled
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
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
