mgergely

Sorry, but I do not get what you mean by "artwork". The mentioned SVG paths are transformed, so technically the idea seems to be working (you can check it in the codepen, if you comment / delete the first .fromTo part). The problem is, that I should always see one side of an SVG path, regardless of the transform3d of its parent - while the whole SVG is transformed, the chosen elements should look like they are not rotated at all (other transformations (e.g. scaling) should apply). To put it in 3D words: I need elements that always face the camera; their position on the screen may change, their size is appropriate to their distance from the camera and their motion paths are set by the containing object (like they are glued to a position on their parent, but always face the viewer).

I just looked at your codepen, and did the following: tl .staggerFromTo("#main div", 0.5, { transformOrigin: "left center", autoAlpha: 0, ease: Power2.easeInOut, transformPerspective: -1000, transformStyle: "preserve3d", rotationY: -180, }, { transformOrigin: "left center", autoAlpha: 1, ease: Power2.easeInOut, transformPerspective: -1000, transformStyle: "preserve3d", rotationY: 0, }, 0.5) So if you do not want (or cannot) change the CSS, just change the JS. Another advice: to create the folding effect, change the rotationY (in the "from" part of the .staggerFromTo()) to -90 from -180, because the first div's back can be seen before it folds in.

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ő