GSAP animation

[Yarchick1034]

Hello everyone, I have two blocks that tend to one point, because since the initial positions are different, then they have different speeds along the path.

Is there a setting that allows you to set the same animation speed, but different path lengths?

 

gsap.to(graphics, 2, { ease: "none", y: 1000 });

 

[ZachSaucier]

Hey Yarchick and welcome to the GreenSock forums!

 

The best way is probably to create two tweens, using the distance calculation as a part of the duration calculation. Modifying a demo I made for another person, you could do it this way:

See the Pen vYOXVbO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Or even better, use the .getRelativePosition() function of MotionPathPlugin that will be in the next release of GSAP to do most of the calculations for you!

See the Pen ExjgdMr?editors=0010 by GreenSock (@GreenSock) on CodePen

[Yarchick1034]

Thank you very much, I took the first example.
Forgot to mention that I use PIXI.js.
Everything worked 😊