Motion animations with an SVG

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:

<div class="svg-animation-container">..</div>

And we start adding animations for each group that we are interested into.

Right Leg

#rightleg {
  animation: rotateHand 5s alternate;
  transform-origin: top left;
  transform-box: fill-box;
  animation-duration: 16s;
}

@keyframes rotateHand {
  0% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }
}

Use CSS rotate() function to rotate in the opposite direction using a negative degree value -5deg.

Both hands

#bothhands {
  animation: rotateLHand 2s alternate;
  transform-origin: top left;
  transform-box: fill-box;
  animation-delay: 1.25s;
}

@keyframes rotateLHand {
  0% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(0deg);
  }
}

Clouds going up

#clouds {
  animation: rotateLHand 2s alternate;
  animation-duration: 16s;
}

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. :)