SVG Animation

Learn to animate an SVG path using the Animator component.

About

On the web, scalable vector images — or SVGs — are commonly used for icons, logos, and other images that need to look great at any scale.

Regular “bitmap” or “raster” images are made up of many small pixels. Such a format contains information about the color of each of those pixels, so that when the computer loads a bitmap image, it cab paints the image pixel-by-pixel onto the screen.

By contrast, SVGs only contain a set of instructions that the computer will use to re-draw the image when it loads. These instructions may describe shapes, like squares and circles, but they are usually compressed into “paths” or curved lines that describe an arbitrary shape.

Such a path has a beginning and end—and, consequentially, a length.

In addition to drawing an SVG at any scale, rotation or color, we can also tell the computer to draw an SVG only up to a certain length. And, by animating this length from zero up to the path’s full length, we can watch the path come together as an animation.

The Animator component, created by Benjamin der Boer, handles that work for us. All we need to do is connect it to an SVG and configure its animation on the component’s Property Controls.

Tips

To bring SVG images into Framer and use them with the Animator component, drag an SVG image onto the canvas, then double click on the icon to convert the icon into a Custom Icon.

To create SVG images inside of Framer, open the Insert Menu and select Custom Icon.

While there isn’t an option to Loop the animation, you can always set the Count property to a very high number and hope that it’s enough!