A motion from a library looks like a library motion until you shape it. This lesson covers every setting in the Customise tab and the stage controls that help you judge the result.
The settings
Open any motion. The Customise tab shows only the settings that motion has. A spinner has colours, size, thickness, duration and easing; a typewriter has text, font and weight; a counter has a number and a prefix. Point at a setting's name to read what it does.
| Setting | What it changes |
|---|---|
| Colours | The colours of the motion, one square each: press one to open the colour box or type a code, point at one to see what it colours |
| Background | The colour behind it, where the motion has one |
| Size | How big it is, in pixels |
| Thickness | How thick its lines are |
| Count | How many pieces it has: dots, bars, particles |
| Distance | How far it moves |
| Blur | How soft its edges are |
| Angle | Which way a gradient runs |
| Duration | How long one cycle takes; shorter is faster |
| Stagger | The delay between one piece and the next |
| Easing | How the speed changes along the way (lesson 4) |
| Plays | Forever, once, twice or three times |
| Text, Words, Number, Prefix, Font, Weight | What a text or number motion says, and how |
Every change shows on the stage as you drag. Motion Studio remembers your settings for each motion, so you can try ten motions and come back to the first one as you left it.
Colours that go together
Palette, under the colours, offers sets of colours that go together for the bright parts; press one to use it. New colours under the settings picks another such set for you, leaving the background and the dark parts as they are. Press it a few times to explore, then fine-tune one colour by hand. Reset takes the motion back to how it comes.
Timing is most of the feel
Two settings change the character of a motion more than any colour:
- Duration. UI feedback (a toggle, a check) feels right at 0.2 to 0.4 seconds. Entrances at 0.4 to 0.8. Loaders around 1 second per turn. Backgrounds slow: 6 seconds or more, so they never pull the eye from the content.
- Stagger. In motions with several pieces (dots, letters, list items), a small stagger makes them feel like a wave or a cascade. Too much and it feels slow; too little and the pieces move as a block.
The stage
The stage is where you judge a motion, and it has the tools for it:
- Play or pause (or press Space), and From the start.
- The time bar. Drag it to look at any moment. A motion that looks smooth can hide an ugly frame: a jump between loops, text that overlaps for a moment.
- Speed. Play at 0.25×, 0.5×, 1× or 2×. A quarter of the speed shows exactly how the easing behaves. This changes the studio only, not your code.
- The background. Try it on a dark, light, see-through or any colour stage, so you know it works on your page.
For hover and click motions, the studio points at or clicks the motion every few seconds. Turn Auto play off to try it yourself with your own pointer.
Share the exact result
The link button next to the motion's name copies a link with your settings in it. Whoever opens it sees the same motion, in the same colours and timing.
Next: easing, the setting that makes motion feel natural.