Syncing translate animation with MotionPath

[KG54]

Hello,

 

I have an SVG path that I am animating another SVG element (a circle) along using the motionPath plugin.

I'm going for the effect where the circle just stays in place, but moves up and down as the SVG path moves past it--kind of like it's riding the SVG path as it moves past.

 

I'm not able to get these two to be synced. I'm able to animate the SVG path to move to the left, and the circle to move just up and down in accordance with the path (by adding a modifier that sets its x-values to 0), but they aren't in-sync.

I'm trying to mimic the effect described here:

I've implemented it the same way and have tried setting the same duration and playing around with the start/end values but have had no success. How can I do this?

 

Thank you!

See the Pen zYgVZgm by KG54 (@KG54) on CodePen.

[Rodrigo]

Hi @KG54 and welcome to the GSAP Forums!

 

The main issue is here:

See the Pen ZEgdJZx by GreenSock (@GreenSock) on CodePen.

 

As you can see in that demo (where the path doesn't move, only the element along the path), when the element gets to the vertical spikes it mostly moves on the Y axis, the movement along the X axis is minimum. In your demo the path keeps moving along the X axis, whereas at those points it should be pretty much static, see the problem?

 

One alternative is to use custom ease:

https://gsap.com/docs/v3/Eases/CustomEase

 

Something like this:

See the Pen dyxBVGy by GreenSock (@GreenSock) on CodePen.

 

But that doesn't really looks OK IMHO, Another option could be to use the same path in our custom ease tool in order to use ease none on the element and find a way to apply that path as an easing for the path's xPercent tween, so it moves really slow at those points and linear (ease: none) the rest of the points. Something like this path (copy and paste it on the customEase visualizer):

 

M0,0 C0,0 0.281,0.281 0.281,0.281 0.281,0.281 0.36,0.294 0.36,0.294 0.36,0.294 0.408,0.347 0.408,0.347 0.408,0.347 0.477,0.363 0.477,0.363 0.477,0.363 0.531,0.429 0.531,0.429 0.531,0.429 0.62,0.442 0.62,0.442 0.62,0.442 1,1 1,1 

 

That should give you an idea of the way you need to tinker with things in order to get the exact effect you're looking for. This will be a trial and error approach as I'm not sure a simple way to convert the path you have into an easing function that actually works for the needs you have.

 

Hopefully this helps

Happy Tweening!

[KG54]

Hi @Rodrigo, thank you so much for respoding! I understand the issue. I think I'll play with the CustomEase, but just wanted to ask--how did you come up with that custom ease path? How did you get those values and make it align with the heartline path?

 

Thank you!

[Rodrigo]

Hi,

 

Is basically the same path of the SVG:

 d="M0,50 15,50 16,35 17,65 18,50 20,50 21,0 22,50 23,100 24,50 60,50 60.5,45 61,50 61.5,55 62,50 100,50"

The only difference is that I pasted that in the Ease Visualizer for Custom Ease. The tool returns a simplified and optimized path that can be used directly:

https://gsap.com/docs/v3/Eases/CustomEase

 

Once you paste the code and remove the focus from the custom ease box, the ease visualizer will give you a graphic representation of the easing path you pasted and the path will be optimized for using with the Custom Ease plugin:

 

Hopefully this clear things up

Happy Tweening!