Relative timeline and scrub

[wpsoul]

Checked the documentation but can't find answers. I want to create a vertical timeline when the line is animated and when it reaches a specific point, it triggers svg shape to scale on it. But I can't find any information on how to make proper relative timelines when I use a scrub. I see that the animation starts at different time when I set different duration of animations.

 

so, my code is like

let tl - gsap.timeline({scrollTrigger: {trigger: "#id", start: "top top", end: "+=100%"}});

tl.to("#id", {scaleY: 1, duration: 2});
tl.from("#id2", {scale: 0, duration: 1}, '<+=1');

 

I thought that the second animation should start when I reached the middle point of the first animation, but it's starting at 75%. So, how it's calculated?

 

[akapowl]

 

It totally does start at the right time; exactly as you set it up to.

See the Pen GRzVRPe by akapowl (@akapowl) on CodePen

The 75% you mention probably relate to the scaleY of your #id at the time the second tween starts, right?

That's because there is a default ease of 'power1.out' on every gsap tween. Since the scaleY increase won't be linear over the 2 seconds, you couldn't expect it to be 0.5 (or 50%) when the second tween starts (at one second into the first tween).

This is that same demo with an ease of 'none' applied - and now with a linear ease of 'none' you'll see the value be around 0.5 (or 50%).

See the Pen YzBmzgJ by akapowl (@akapowl) on CodePen

 

 

Here for example is one place where it is mentioned in the docs:

https://gsap.com/docs/v3/GSAP/Tween/#notes--tips

If you want to keep any type of ease but a linear 'none' and still know when a tween will hit a certain value (like you wanting those 50% or 0.5) so you can set up something to start at that point then, you'll want to have a look at this helperFunction in the docs - it should totally help with that.

https://gsap.com/docs/v3/HelperFunctions/helpers/easeToLinear/


[Edit] Oh, and I forgot to mention earlier:

If you're going to change the dimensions of an element, best don't use it as the trigger element for a ScrollTrigger; that will just throw things off for you in the long run - better wrap it in a div and use that wrapper as the trigger then.
 

[wpsoul]

You are right, I didn't know that easing of previous animation also affects starting point of the next animation, when I changed to linear, it started in proper time