CSS rotation to turn After Effects animation into SVG animation

Hi guys, I guess I made an animation on After Affects which is only based on rotation and changing position if elements. I want to learn animating SVG by using CSS properties to animate this. If that’s OK I wanted to ask two questions here:

Is there any simple way to assign classes to parts of SVG for such complex SVG objects? Or do I just go through all the code and try by hand where each part belongs?

How do I assign a centre of rotation like I do in After Effects?


It seems a reasonable thing to practice on: it’s not sequenced, and as you say the animation is just a tiny bit of rotation.

Note that when you get to sequenced animation (do this then this then this), CSS will be a nightmare - it’s great for animating one state over a set amount of time (click thing, thing animates, done), more complex stuff you’d want to start looking at JS. Anyway…

No and yes I’m afraid. But:

You’ll probably want the SVG simplified as far as possible, so you’ll want to run it through a tool that does that. There’s one called SVGO: you can do this online here SVGOMG - SVGO's Missing GUI

Afaics you only need to animate four things, so definitely wrap all the shapes that belong to each one in a <g> element, that’s what you’ll animate (so really, just four CSS classes). This might turn out to be really easy, but it might be really fiddly.

So now you have four <g> elements, each with a class, and you can apply some kind of wobble animation using CSS’ transform: rotate. There is also a property called transform-origin which lets you set the origin, which will relative to that element you’re rotating.

Edit: also, AirBnb made this Lottie Docs
It works very well.

1 Like