Need help with 3d Text Rotate Animation

[hshekhar]

Hi Folks , 

I have been trying to implement 3d Rotate animation with 5 strings . 
Its working fine with 6 but not with 5 

Example for 6 strings 

https://codepen.io/hshekhar/pen/RwdGoJV

Example for 5 strings 

See the Pen WNmGGKj by hshekhar (@hshekhar) on CodePen

Please help me fix this or suggest me a solution using GSAP.

See the Pen RwdGoJV?editors=1100 by hshekhar (@hshekhar) on CodePen

[mvaneijgen]

Hi @hshekhar all you're sharing is CSS animations and I see no attempt at a GSAP solution, so we can't really help with that. If you would try to recreate this with GSAP and get stuck, someone here will be happy to take a look for you!

 

The problem with CSS animation is exactly the point you're facing now it isn't dynamic, so you always have to fix your hard coded values if you want to change something, that is why GSAP animations will be the perfect solution for these kinds of animations. 

 

If you need help getting started check out this awesome getting started guide https://gsap.com/resources/get-started/ and when you get stuck just post back here with what you've tried. Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

Maybe these demos can provide a good starting point:

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

 

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

 

Happy Tweening!