moving animated block to a specific position with gsap

[nightfury1720]

I've got some flying blocks that fly in random directions, and I want them to settle down on top of a particular block with the ID "destination". Here's the issue: I'm calculating the offsets between the destination block and the flying block, subtracting these to determine the distance needed to reach the destination. When I trigger the function that moves the flying block on top of the destination after starting the animation, it correctly figures out where to go. However, the gsap.to function fails to get the flying block to the right spot.

Could someone help me with this?

Here's the link to the project. Unfortunately, I can't use CodePen because this project is based on React.

I'd appreciate any assistance in fixing this issue. Thanks!

[mvaneijgen]

Hi @nightfury1720 welcome to the forum! 

 

I'm no React expert, but there are a few things you want to keep in mind working with React or use the new useGSAP() hook instead of useEffect(), which solves most of these out of the box. 

 

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

And check out this demo and the MotionPath  docs https://gsap.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition() Hope it helps and happy tweening! 

 

See the Pen rNdzEpe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

[nightfury1720]

cool @mvaneijgen, have been trying to understand what is the issue since yesterday, tore off a lot my hairs for this.
Thanks a lot for your help, let me try implementing that once and see if it works.
 

[nightfury1720]

@mvaneijgen I followed your instruction dumped all of my GSAP logic in useGSAP still facing the same issue,  I have a  a function called calculate delta which may use getRelativePosition to calculate where I need to move to go to reach my destination, which gives correct response (I have debugged this).

The issue lies when i use this response to use gsap.to functionality to  reach my destination. (It always send me somewhere else)

Cant figure out what i am doing wrong, I am attaching a react playground where I have dumped my code: https://playcode.io/1761482
Pls help

[nightfury1720]

8 minutes ago, nightfury1720 said:

@mvaneijgen I followed your instruction dumped all of my GSAP logic in useGSAP still facing the same issue,  I have a  a function called calculate delta which may use getRelativePosition to calculate where I need to move to go to reach my destination, which gives correct response (I have debugged this).

The issue lies when i use this response to use gsap.to functionality to  reach my destination. (It always send me somewhere else)

Cant figure out what i am doing wrong, I am attaching a react playground where I have dumped my code: https://playcode.io/1761482
Pls help

ignore now,I should be doing this: x: '+=' + x, but i was doing x: x.  😭