RotateY when the object moves from left to write, then back to current view.

[Muc]

I have this animation, it's good but not so good because the 'Bee' looks like is moving backward until it hits the first turn.

Is there any way to improve that?

See the Pen eYoWROq by Daniele-Mucilli (@Daniele-Mucilli) on CodePen

[Rodrigo]

Hi @Muc and welcome to the GSAP Forums!

 

There is no rotation on the Y axis in SVG, just plain 2D rotation, nothing more. Is not a GSAP issue just the way things are with SVG. I'm afraid that your bee is just drawn in the wrong direction.

 

I made a few tweaks to your demo and also added the pathEase helper function that Jack created to help in this cases:

See the Pen wvZdpwL by GreenSock (@GreenSock) on CodePen

 

Is worth noticing that it would be better to avoid your path to have up and downs in it in order to avoid those sudden jumps in the animation as shown in this demo:

See the Pen GRoXzYj by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Alright, I couldn't help myself - I just had to find an algorithm to try to smooth out the movement when the path goes backwards. After about 10 hours, I think I've figured it out, and also demonstrated how you can make the bee kinda twist itself to remain oriented in the direction it's moving using scaleX and scaleY: 

 

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

 

Notice that pathEase() helper function has been updated and you can pass in a config object with smooth: true. 

 

I hope that helps!

[Rodrigo]

On 3/23/2024 at 5:10 PM, GreenSock said:

Alright, I couldn't help myself - I just had to find an algorithm to try to smooth out the movement when the path goes backwards. After about 10 hours, I think I've figured it out

Everything just fine and normal in GreenSock tower 😂