Chloe Hwang, Former Front-end Developer
Step-by-step guide on the very basics of animating for the web.
- To create dynamic, responsive animations, meaning they happen based on some user interaction.
- To create advanced animations that can’t be done easily with CSS, such as long, narrative sequences or bouncing effects.
There are many different types of UI animation, but in general, you can think of them as falling into two categories:
- Animation with a defined end state, like a menu showing and hiding on click.
- Animation with a fluid end state, like a page read indicator where the progress bar continually grows or shrinks based on how far you’ve scrolled.
Dynamic - Defined end state
Let’s try out a classic example — making a menu open and close on click. On click of the hamburger button, we want the menu to slide in from the right. First, we need to define the starting state and end state in CSS:
You can see the end state is defined by the class
|**⭐️ Note:** Try to only add classes to the lowest level element (i.e. an element that doesn’t have any child elements). This is because every time a class is added, the browser has to recalculate styles — a very memory-intensive and costly procedure. If an element has children, the browser will recalculate styles for all of them as well. In Part 3, I will explain in-depth about how the browser actually renders components and what that means for performance.|
Dynamic - Fluid end state
Sometimes, there are situations where you just don’t know what the end state of an animation will be. Take the example of a page read indicator — a progress bar that shows how far along you are on a page. As we see below, the indicator’s width continually changes based on your scroll movement:
There is no way to know ahead of time what the
indicator.style.setProperty('width', progressPercentage) indicator.style.width = progressPercentage
One huge caveat of this approach is that it’s generally frowned upon to directly set styles without using
Some very popular, widely used, and well-supported libraries are:
<svg viewBox="0 0 1200 1200"> <path d="M320 111A272 272 0 0 0 66 350c-4 34-2 94 6 141 11 68 36 125 80 182 17 22 33 40 62 69 40 40 55 54 152 138 107 92 163 143 219 196l15 14 15-14c56-53 113-104 219-196 95-82 121-106 158-143a439 439 0 0 0 144-316c2-57-4-98-20-139a269 269 0 0 0-192-164c-74-17-146-5-210 32a333 333 0 0 0-114 116l-10-14c-11-18-24-34-39-50-64-65-144-97-231-91z"/> </svg>
<path> element that has a
d attribute followed by a string of letters and numbers. Each
<path> represents a single continuous line, and the letters and numbers correspond to different coordinates of that line. In this example, the
<path>'s coordinates form a heart. An SVG can have many different
<path>s, enabling complex graphics. This is what makes SVGs so useful for animation — you can pinpoint a specific
The main benefits of using SVG for animation are:
- Easily animating parts of an image to make it come alive. Useful for graphics, logos, narrative onboarding flows.
- Easily manipulating shapes. Useful for data visualization, bending straight lines.
- Creating animations that maintain image quality on any size device.
The “gotcha” is that CSS can only animate a few properties on SVGs, like
fill, and a handful of SVG-specific properties. The brightside is that there’s still a lot you can do with just these properties. One such technique is called SVG line animation, which gives the neat effect of an image drawing itself. Let’s try this out with our heart.
In the CSS, you can see that we set up the starting and end states on hover of
path. You’ll notice a lot of properties starting with “stroke” — this refers to the line represented by
<path>. We then add a CSS transition to achieve the final effect, drawing the line using
filling in the heart with a slight delay of
0.9s, to ensure it happens after the line.
- Animate dimension and position.
- Access all native SVG properties, such as
- Change the actual shape of an element (meaning the path’s coordinates).
Some libraries to check out are:
Libraries can also be used together, like this awesome example built with SnapSVG, GreenSock, and jQuery.
If you’re like me and don’t know how to use Illustrator/Sketch/etc to create SVGs, try sites like flaticon.com that let you download graphics in SVG format for free. You can also convert images to SVGs or generate simple SVG shapes yourself.