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?
Thanks!
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.