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?