Applying micro animations for icons

The sentence at the top of my homepage has chips: small pills with an icon and a word. Every few seconds, a chip swaps to its next word. “Heavy theories” turns into “rigid frameworks”, “design systems” turns into “design tools”. The letters already morphed from one word to the next, but every icon came in the same way, with the same small pop. The pop said that something changed. It did not say what changed.

I wanted each icon to act out its word for a moment, and then get out of the way.

A move for each word

Before anything was built, I wrote each move down as one sentence:

Design tools: the wrench turns as if it tightens a bolt, and the screwdriver bobs a little along its shaft.
Design systems: the four squares appear one by one, clockwise from the top left. A system is built piece by piece.
Adopted: the middle person shows up first, then the two beside them slide into their places. One person starts, the others follow.
In sync: the arrows rest for a beat, wind back a little, turn clockwise two times, and ease to a stop.
Rigid frameworks: the two cogs turn against each other in steps, then strain and stick. The stick is the word “rigid”.

Each move is about a second long, and it plays only when its chip swaps in. When you first open the page, the icons sit still, so the page is calm when you arrive. With reduced motion turned on, nothing moves.

A default move for the rest

Not every word needs its own story. For heavy theories, fast execution and live prototypes, I used one shared move: the icon grows a little, tilts, and settles back to its size and angle.

I liked it enough to put it on the custom moves too. The icons with their own move now also grow and tilt while they do it. On the design tools, design systems, adopted and in sync icons, the grow lasts 0.6 seconds at most, so on a long move like the two turns of the sync arrows, it ends before the turning does.

An icon with no move of its own, like one I upload later, still gets the old pop.

How the parts move

Each icon is drawn once on the page and reused, which keeps the page light. But it also means that the parts of an icon cannot move one by one. So while a move plays, a copy of the icon takes its place. The parts of the copy move, and when the move ends, the copy goes and the original comes back. The copy has the same sticker outline, so you can’t see the change.

The cogs needed one more detail. Each cog has six teeth, so one step is one tooth. However many steps the cogs turn, they stop in the same position they started from, so there is no jump at the end.

Choosing the easing

Easing is the speed of a move over its time: whether it starts fast or slow, and how it stops. The same move feels very different with a different curve, so each part got the one that suits it:

Overshoot for things that appear: the design system squares and the middle person. They run a little past their size and settle back, so they land with a small bounce.
Ease out for things that slide or tick: the two people beside the middle one, and each step of the cogs. They start fast and take a long, soft stop.
Ease in and out for the wrench, the screwdriver, and the grow and tilt. They start and stop slowly, like a hand.
A wind back for the sync arrows. The curve dips below the start before it goes forward, so the arrows pull back a little, then turn.

The pop for icons without a move of their own has its curve in my Design System Manager, on the Motion page, as “Chip icon pop”. There I can pick a curve from a list (Ease out, Spring, Overshoot, Ease in and out, and more), drag the two handles of the curve, or type its four numbers. “Back to the site’s value” undoes it. The curves of the custom moves are still set in the code for now.

Controls to fine tune

Timing that looks right in my head rarely looks right on the page. So every move has controls in my site editor, under Chip timing › Icon animation. A preview of the sentence plays the moves while I drag:

Duration for each icon. 0 keeps the icon still.
Start size and tilt: how the icon comes in.
Rest size and tilt: how the icon stays after its move.
Steps for the cogs, from 1 to 6.

At first, Start and Rest applied to every icon at once. That was quick, but sometimes one setting did not suit every icon, and I wanted to fine tune each one. So now there are two columns. All icons has the shared Start and Rest, with a “Use these for every icon” switch. Each icon has that icon’s own Duration, Start and Rest. When I change one icon, the switch turns off, and the other icons keep the shared values. When I turn the switch on again, every icon goes back to the shared values.

This is where they are today: most icons rest at 120 to 125% of their drawn size, with a small tilt, and the cogs turn three steps in 1.5 seconds before they stick.