Hello,
I have a task to animate an SVG (simplified map of a city), where road signs are part of the presentation.
Everything goes quite smoothly with GreenSock (drawing SVG lines, rotating the whole image, etc.), but I cannot get the last part to work as intended: the small signs should always face the screen (the camera), while the whole SVG rotates in 3D, and the signs follow the path set by the parent rotation (and other tweens).
Something like this image:
My idea was to rotate them in the exact opposite direction as their parent goes (and the animation should last the same amount of time), but this does not work (except for the Z axis, where it does what is planned).
The codepen has the full SVG (it's quite large), the JS code that I tried to use (and some CSS only so the image can be seen).
Has anybody any idea how to achieve this effect? (Or is it possible at all with CSS / GreenSock animation?
Thank you in advance,
Gergő