Give your grid a little motion

Good motion in a grid is never decoration. It answers a question the visitor did not have to ask: did the page load, which card am I on, what just changed? Motion that answers nothing is noise, and noise that moves is the hardest kind to ignore.

A grid has three moments where motion helps, and Essential Grid 4.0 gives each one its own setting. This guide shows them on a live grid, with the eight new entrances to try.

Try it

Three moments of motion

Moment	When it plays	What it tells people	Where you set it
Entrance	When the grid comes into view	The items are here, and in which order to read them	Loading › Entrance effect
Hover	When a card gets the pointer, the keyboard’s focus or a first tap	This card answers, and opens when you click	Items › Hover, and the skin’s own hover
Change effect	When visitors filter, sort or turn a page	These items stayed, those left, these arrived	Navigation › Change effect

Each one should be over before anyone waits for it. The entrance plays once; the hover plays a hundred times a visit; the change effect plays on every click. The more often a motion plays, the shorter and quieter it should be.

The eight entrances

The section Entrance effect on the Loading page shows the entrances as tiles: No entrance effect and eight presets. A new grid starts with Spring lift. Each tile plays its entrance as a small loop when you point at it, and the preview plays the one you pick.

Entrance	What moves	Order	One card	The first screen
Spring lift	Each card lifts in with a soft spring	Reading order	650 ms	0.74–0.75 s
Blur rise	Cards rise out of a blur	Reading order	600 ms	0.75 s
Frame rise	Each card opens from its bottom edge while its picture settles	Reading order	650 ms	0.75 s
Reading wipe	Cards wipe in from the side	Reading order	600 ms	0.74–0.75 s
Soft scale	Cards grow in a little	From the centre	500 ms	0.74–0.75 s
Ink	A block in each picture’s colour wipes away upward	Reading order	650 ms	0.75 s
Iris ripple	Cards open as circles, rippling out from the centre	From the centre	650 ms	0.75 s
Focus pull	Cards come into focus	From the centre	650 ms	0.75–0.76 s

We measured the times on the grid above, its six cards in view, replayed in Chromium and in Safari’s engine, WebKit: “one card” is a card’s longest movement, “the first screen” the time from the first card’s start to the last card’s end. The presets have no settings of their own: their duration, order and easing are part of each one, so the first screen settles in about three quarters of a second, always within 0.8 seconds; on a grid of eight cards we measured the same.

Reading order goes row by row, left to right (right to left on a right-to-left site): it suits lists people read, such as posts, products and a programme. From the centre ripples out from the middle of the visible grid: it suits a wall of pictures nobody reads in order.

Cards further down the page wait and enter as they scroll into view, so a long grid never plays its entrance to an empty screen.

The classic entrances

A grid made before 4.0 keeps its entrance. If it uses a classic one, such as Reveal one by one or Fade in, the section shows it as one more tile, Classic and its name, chosen, for as long as the grid keeps it; once you pick one of the eight, the classic one is not offered again. A grid on the classic front end keeps the classic list, with its Speed, Delay and Stagger by.

Start when people can see it

An entrance played below the fold is an entrance nobody sees. Start in view in Loading › Lazy loading is on for a new grid: the grid starts, and plays its entrance, when it scrolls into the window, not when the page loads.

Hover: one clear answer

A hover says “this one”. Give the card one clear response, a lift, a slight zoom, a cover with its title, and make it fast; a card that performs a little show each time the pointer crosses it gets tiring by the third card.

The grid’s own hover is in Items › Hover, as tiles that set it in one click: Nothing, Zoom the item, Zoom out, Lift, Fade the others, Blur the others and Zoom and fade the others. Custom shows the two rows behind them: Item on hover for the card under the pointer, Other items on hover for the rest. The hover of a skin’s cover and layers is part of the skin, with its own timing (Timing is a design material).

In new 4.0 grids a hover plays for the mouse, for the keyboard’s focus and for a tap: on a touch screen the first tap on a card shows its hover, the next one opens it.

The change effect: show what moved

When visitors pick a filter, sort or turn a page, the items rearrange. The change effect shows how. The section Change effect on the Navigation page has five, as tiles: Glide & scale, the one a new grid starts with, Glide, Spring glide, Glide & blur and Crossfade. They have no settings: each brings its timing and is over within about 0.6 seconds. A grid that keeps a classic change effect, such as Fade, shows it as one more tile with its Speed, Delay and Stagger by. A calm effect lets people follow which cards stayed; a busy one makes them search the grid again after every click. More in Make changing layouts feel natural.

Reduced motion

Some visitors ask their system for reduced motion: motion can make them dizzy or sick, or simply distract. New 4.0 grids follow that setting on their own:

• No entrance: the cards are in place at once.
• Hover: the hover shows its end state at once, without the movement in between.
• Change effect: a quarter-second fade from the old items to the new ones; nothing travels.

Nothing to switch on. Try it with the grid above: turn on reduced motion in your system’s settings, reload this page, and press Replay. (On a phone, Replay plays the cards in view; the others are already there when you scroll to them.)

Where you set it

Effects in the quick bar above the preview lists the grid’s effects: Entrance, Change and Item hover, each with every tile the grid has (the eight entrances, the five change effects, six hovers) and a round arrow, Replay, that plays that effect once in the preview; the preview does not play the five change effects, your page does. Below them, the skin’s own hover names the skin, with Edit skin, and More in Loading leads to the Loading page.

The details of every effect are on its own page of the grid editor (Motion: entrances, hovers and re-layouts).

A motion checklist

1. Does every motion answer a question: arrived, chosen, changed?
2. Is the entrance over in under a second, and does it play when the grid is in view?
3. Does the hover give one clear response, fast?
4. Can people follow the items when the layout changes?
5. Does the grid work with reduced motion on: the cards in place at once, and only a short fade when the items change?

Read on

• In the manual: Motion: entrances, hovers and re-layouts, Loading and performance, Accessibility and reduced motion
• The guides: Timing is a design material, Make changing layouts feel natural