A starter tutorial on motion animations created with CSS
I personally think of CSS animations as something complex. While this is still true, I am making steps towards learning more about it, because that’s the only way to fill knowledge gaps. I am going to teach you how to animate an SVG, using Figma and CSS. We are going to use Figma because it’s so useful to ~see~ and ~group~ the elements that you will later want to animate. For the next steps, I will just assume you have a Figma account and a small project you can tinker with.
Our demo SVG is one from https://undraw.co/ (search for
reading) and after some minor modifications, I used it on the front page of my digital garden https://gabriela.codes.
Open an SVG
Choose your image in SVG format and open it in Figma.
On the left side, you will see all the individual ids for all the constructed elements. You can hide them, group them, delete them.
Group what you want to animate
We are going to select the character’s left leg and group it into one element. Click on one part of the leg, hold
SHIFT down and continue clicking on the rest of the items. You will get to a situation similar to this. After that
CTRL+G and it will group it. Rename the default name to something that is representative of what you selected, for example:
leftleg. Do the same to anything else you think it will be nice to animate, like the clouds, flowers, hands.
After you are done grouping, it’s time to export the .svg file
with the id attributes like in the image below.
Back to code
The first important part is completed and now we just need to write some CSS to animate our image.
We place our SVG inside a container:
And we start adding animations for each group that we are interested into.
Moving right leg
Use CSS rotate() function to rotate in the opposite direction using a negative degree value
Moving both hands
Clouds going up
You can continue to add motion to other ids that you have in your SVG and just play around to see what goes good together. Don’t forget, some people can get motion-sickness from too many animations on the screen. Trust me. :)
Notes mentioning this note
There are no notes linking to this note.