How I stopped worrying and learned to animate SVG

So you want to create animated icons for your site?

after illustrating some icons for my personal site, I had the notion of animating them. icons should be relatively small part of the site, so lets make a GIF.

original illustration

- sigh -

Oh man, that means recreating all my vectors to after effects and then exporting animation to photoshop only to come up with a pixelated ugliness..

That was the time I started seeing that web developers who knows what their doing, are using inline svg’s as icons. some are creating very neat stuff using only live SVG.

that’s nice but why should I use SVG?

SVG’s advantages

first, I’ll have to say, SVG’s arent good for everything. and as always you should ask yourself what about alternaties like GIF or video. the first big advantage is the “scale”, using svg inline also means you can change and twik other properties on top of width or height. (more on that coming up…) Another advantage is creating an svg and coding it means less HTTP requests which usually means your page performs better. but why should I handle messy code, Im a designer!

The shortcut — Bodymovin’

It was roughly the same time that Airbnb Design announced Lottie
(based on the great bodymovin plugin)it reminded me of the good old swiffy days. I was amazed someone actually solved my problem and magicly turned animation to code. I Prefered this method mainly because I already work with After effects. So during one of the projects I played around with it and no doubt the resault is not bad at all.

However, Is this the best method for what I need? and whats all this in the json file?

Bodymovin scary code output

It made me realize this solution (with its limited support) Is not right for me. this massive code and Js add-on is exactly what I wanted to avoid.

The Idea behind Bodymovin is to help export complex animation to code, But what if I just want a simple animation?

Turns out, from a Front end developer point of view there are many alternatives, Chriss Gannon even recreated Lottie’s animation with pure GSAP code, just to prove a point.

So lets try to see more about animating svg without opening any animation program. I looked it up and turns out there are many articles written on the subject.

the biggest best guide to anything SVG is Here

vector illustration made with (surprise) illustrator

What’s SVG anyway?

So After I exported my icons from illustrator (or Sketch). I saw that I can view the same svg file as source in my browser. While there still were many many 1’s and zeros, I saw some familiar faces.

There’s <Path> , Fill, a pattern, even groups (<g>). hmm, not so complicated. And turns out all of the bloated code of numbers is a real issue, and the easy fix for it is called SVG-Optimize. And beginners can even use its amazing gui version SVGOMG — a must for anyone working with svg.

Ok now the code is lighter and I can see whats what in the html. This means will be able to manipulate stuff like “fill”, Stroke, width and so on..

So lets try to give it motion

Easy peasy animation — animate.css

So how can I animate it with minimum fuss? On my website I use the (now conventional) animate.css.
Because I made a Heart icon, i’ll add it a pulsing animation like this:

<path class="animated pulse infinite">

And that’s all folks. that’s as simple as it gets.

Animate.css is just the most popular solution. You can find more ‘user friendly ‘ tools on the web. I found two neat online animation editors — the first is svg circus.

Advanced — CSS animation

The main idea of animate.css is a ready-made animation library. First we define the duration:

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
}

1s means one second. Then, each animation like ‘pulse’ has its key-frames defined. Telling us from which attributes to which should the animation take place.

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

Here we have 3 keyframes playing looped. The first and last has the object regular size, and in half a second (50% of the duration) the size increases.

This is css animation in a nutshell. Its not just easy to understand, its also very recognizable to any animator, just draw it in a timeline.

here’s chrome developer timeline that is very nice to use with web timing and animation:

The use of % also means that changing animation duration wont harm the animation from happening so we can play around with that, or even use same animation with different timing on two separate objects.

Second, this method means we can create our own css animations, and do something a bit more advanced.

Lets say I made this animation of an eye opening and closing.

@keyframes eye {
 0% { transform: scale(1, 1);
 stroke-width: 2px;
 }
 100%{ transform: scale(1, 0);
 stroke-width: 20px;
 }
 }

If I want to change the timing so it will blink fast and stay opened I’ll play around with the %

@keyframes eye {
 5%, 20% {
 transform: scale(1, 1);
 stroke-width: 2px;
 }
 10%, 15% {
 transform: scale(1, 0);
 stroke-width: 20px;
 }
 }

Using the same principle means I can make the eye move left and right and more..

@keyframes pupil {  100%, 30% { transform: scale(1, 1); } 2%, 20% { transform: scale(1.2, 1.2); } 9%, 16% { transform: scale(0, 0); } 75%, 50%, 35% { transform: translate(20px, -4px); } 55%, 65% { transform: translate(-20px, 5px);  }  }

The final animation:

Pro — use animation libraries and Javascript

The libraries give more animation power as well as interactivity goodness. Right now the top animation libraries that I know of are:

• SVGsnap
• anime.js
• https://greensock.com/
• http://mojs.io/
• Dont forget Lottie and Bodymovin!

Furthur Reading:

This article helped me a-lot :

Animate SVG with CSS

originally published on my blog in hebrew