GSAP rotateY or rotationY issue when applying inner SVG elements

[Abi Rana]

Hello guys, I was working on some animation for my client and I found the issue with rotateY which I'm unable to implement. Can you guys please check and let me know if there is any solution to this?

 

I've checked few forum topics and did see the solution below shared by you guys. It suggests to use scaleX but element is not a symmetrical element so I need it actually be flipped and I don't think I can use it as a separate SVG as well.

 

 

By the way storyline is as follow (store guy filling crate to a van):

• store guy goes near the van
• crate is left there (hide crate)
• store guy come back to the crate laying outside the store
• picks another crate
• repeat until there is no crate

 

So can you guys please check and let me know if there is any solution to this?

 

Thank you for checking in.

Abi Rana

See the Pen JjYmeaw by abirana (@abirana) on CodePen

[PointC]

The solutions mentioned in the other thread are your best options. I don't understand why those wouldn't work for your store guy. You can animate the scaleX of that group and it's happening quickly (0.1) so it should look fine.

 

Happy tweening.

[Abi Rana]

Really sorry for the late reply.

 

And scaleX did work for me. At first I thought it wouldn't work because I had to flip the guy; so I thought that would not work. But then again I tried using -1 value and just worked like a charm.

 

Thank you so much for the reply.

 

Regards,

Abi Rana

 

 

[Abi Rana]

By the way, they are using symmetrical element on their solutions mentioned in the other thread. So they might not have faced this issue.

 

So for asymmetrical element using -1 for scaleX value does the trick. So if someone needs flipping or spinning on Y axis they should definitely use this in place on rotateY or rotationY.