Position of animated element with ScrollTrigger

[77ideas]

Hi,

i'm dealing with some problem, I'm trying to animate dot1 from source position defined in css, to point X defined by offset.top / offset.left of target place in one scrollTrigger, then same dot from last position to next place, but when I do this second animation starts with source position from css not the position changed by animation, how can I force "white dot" to start from top, left which has been set by first timeline ?

For better understanding my problem take a look at codepen where the dots are animated.

See the Pen GRoYEWE by 404ideas (@404ideas) on CodePen

[ZachSaucier]

Hey 77ideas.

 

Though the application is different, the thread below is asking essentially the same question. I gave several potential solutions:

 

It's the same basic issue of the mistake of not using relative tweens carefully in the common GSAP mistakes article.

 

Side notes:

• It's best not to animate top, left, width, height. Instead you should animate x, y, scaleX, and scaleY as these are more performant. I'd probably position all of your dots at top: 0; left: 0; and let transforms do all of the positioning.
• "power4.In" should be "power4.in".
• You don't need the  + "px" because it assumes you want pixels by default.
• When getting an element's offset, you should try your best to do it once and then refer to that later because .offset() is not performant.

  var targetOffset1 = $(".dottarget1 .dotted").offset();
  
  // later
  x: targetOffset1.left + 6,
  y: targetOffset1.top + 6,