Two grids can use the same effect and feel nothing alike. One answers the pointer at once; the other makes you wait for it. The difference is not the effect but its timing: how long it takes, how late it starts and in what order its parts move.
Timing is as much a part of a design as colour or type. The two grids below show the same hover, the same photos and the same skin. Only the timing differs.
Try it
Point at a card in each grid, or tab to it with the keyboard; on a touch screen, tap a card once.
Demo photos. The photo zooms, the cover fades in and the label follows 100 ms later: the hover is complete after 0.4 seconds.
The same hover at 1000 ms, the label 500 ms later: 1.5 seconds from the pointer to the last movement.
The first feels like the card is answering you. The second feels like the card is busy, and by the time its label arrives, your pointer may already have moved on. We measured both in Chromium and in WebKit: the quick hover ends 0.40 to 0.41 seconds after the pointer arrives, the slow one 1.48 to 1.50 seconds after.
Three kinds of time
| Time | What it is | What it changes |
|---|---|---|
| Duration | How long one movement takes | Fast feels responsive, slow feels heavy |
| Delay | How long a movement waits before it starts | A small delay puts things in order; a long one feels like lag |
| Order | Which part, or which card, moves first | Leads the eye: the photo, then the label; the first card, then the next |
How long
A hover answers an action, so it should feel like part of it. Most hovers feel right between 200 and 400 ms: long enough to see, short enough that nobody waits. Much shorter, and a movement reads as a jump; much longer, and people start waiting for it.
Bigger movements may take a little longer than small ones: a cover sliding across a whole card needs more time than a label nudging up a few pixels. The grids above give all three movements the same duration, so you can compare the two timings, not three effects.
How late
A delay is for order, not for drama. In the first grid the label starts 100 ms after the cover, so the eye goes photo, cover, label. In the second, 500 ms of waiting turns the same order into a pause.
A hover’s delay works only on the way in. When the pointer leaves, the hover goes back at once, without its delay, in the effect’s own time: on both grids above we measured 0.29 to 0.31 seconds for the way out, however slow the way in.
In what order: the entrance
An entrance is the same question across many cards: who comes first, and how far apart. In Essential Grid 4.0 the eight entrances bring their own timing, so you choose the feel, not the numbers. Measured on the grid of Give your grid a little motion: one card takes 500 to 650 ms, and the cards follow each other closely enough that the whole first screen has settled after about three quarters of a second, with six cards in view as with eight.
Order is the part you choose. In reading order the cards come row by row, the way people read them; from the centre, they ripple out from the middle of the visible grid.
Where you set it
The hover’s timing is the skin’s: every movement has its own Duration and Delay, under Timing.
- A layer, such as a title or a label: choose it in the skin editor (the inspector names it, such as Card › Title), then Hover › When the card is hovered: its effect (a tile), On hover (Appears, Disappears, Always visible) and, under Timing, Duration (Default, or 200 to 1500 ms) and Delay (in ms).
- The card: Card › Hover › Effects in detail has the Media effect, the Cover effect and Cover and its layers together, each with its own Timing.
- Cover layers come in › One by one gives the cover’s layers delays one after the other, so they come in in order without setting each delay by hand.
The change effect, when visitors filter, sort or turn a page, is on the grid’s Navigation page, in the section Change effect. Its five 4.0 effects bring their own timing: each change is over within about 0.6 seconds, and there is nothing to set. Only a classic change effect, kept by an older grid or offered on the classic front end, has a Speed, a Delay and Stagger by (Items, Columns or Rows).
Reduced motion
Visitors who ask their system for reduced motion get no movement: no entrance, the hover’s end state without the movement, a quarter-second fade to the new items after a filter. The timing you set is for everyone else; nobody has to wait for it.
Good to know
- Check timing on a slow phone as well as on your desk: a hover that feels crisp on a fast laptop can feel late on a phone.
- A skin is shared: every grid that uses it gets its timing. Duplicate the skin before you change one grid’s hover.
- Keep the duration of similar movements the same across a page: two grids with two different hover speeds feel like two different sites.
Read on
- In the manual: The skin editor, Motion: entrances, hovers and re-layouts
- The guides: Give your grid a little motion, Make changing layouts feel natural