The library is big, and everything plays at once. This lesson shows how to narrow it down to the few motions worth comparing.
Ten kinds of motion
Under Kinds on the left, every kind is listed with how many motions it has. Here is what each is for:
| Kind | For |
|---|---|
| Loaders | Spinners, dots and bars for a wait |
| Text | Headlines that type, wave, glitch and glow |
| Backgrounds | Moving backdrops for heroes and sections |
| Buttons & hover | Buttons, links and cards that answer the pointer |
| Attention | Pulse, shake and bounce to point something out |
| Entrances | How an element arrives on the page |
| UI feedback | Switches, menus, likes and messages |
| Shapes & SVG | Lines that draw, blobs that morph, things in orbit |
| Pointer | Cards, buttons and cursors that follow the pointer |
| Charts & numbers | Bars that grow, lines that draw, numbers that count |
Press one to see only its motions. All motions, above them under Library, shows the whole library again, grouped by kind.
How it plays
In the How it plays row above the grid, filter by when a motion moves:
- Loop plays forever: loaders, backgrounds.
- Plays once plays when it appears: entrances, a number counting up. The studio replays it so you can watch.
- On hover plays when the pointer is on it. The studio points at it for you.
- On click switches on a click: a toggle, a menu button, a like. The studio clicks it for you.
- Pointer moves with the pointer, with a few lines of script. The studio moves a pointer for you.
This filter matters more than it looks. A hero background must loop; a button effect must answer hover; a success check should play once. Pick the right behaviour first, then the look.
Search
Type in the search box: spinner, glitch, wave, toggle, counter, snow. Search reads each motion's name and its tags, so ecg finds the heartbeat line and speedometer finds the gauge. Press / from anywhere to jump to the box.
Search and the filters work together: Backgrounds plus gradient finds the aurora, the gradient shift and the film grain, and nothing else.
Compare by watching
Watch a few cycles before you open anything. Motion that looks clever once can be tiring the tenth time, and a loader is watched many times. Ask of each one:
- Does it say the right thing? A bouncing dot feels playful; a ring feels neutral.
- Is it calm enough to sit next to content?
- Does it read small? Cards in the grid are small, like most real loaders.
Favourites
Open a motion and press the star next to its name, or the star that appears on a card when you point at it. Favourites on the app bar counts them and, when pressed, shows only them, so you can collect candidates while you browse and compare them side by side.
Pause everything
All that movement can be a lot. Pause all in the app bar stops every motion in the grid; Play all starts them again. Cards also pause by themselves when they scroll out of view.
Next: making one motion your own.