A grid has three effects, each set on its own page of the grid editor:
| Effect | When it plays | Where you set it |
|---|---|---|
| Entrance effect | When the grid comes in | Loading › Entrance effect |
| Item on hover | When a visitor points at an item | Items › Hover |
| Change effect | When visitors filter, sort or turn a page, and the items rearrange | Navigation › Change effect |
Effects in the quick bar above the preview shows the effects that play, switches them on and off, and shows every choice the grid has as a tile that plays when you point at it. An effect you pick plays once on the preview, so you see it right away; the five change effects of 4.0 are the exception: the preview does not play them, your page does.
Entrance effect
Loading › Entrance effect shows the entrances as tiles: No entrance effect and the eight entrances of 4.0, Spring lift, Blur rise, Frame rise, Reading wipe, Soft scale, Ink, Iris ripple and Focus pull. Each tile plays its entrance as a small loop when you point at it. A new grid starts with Spring lift. The eight have no settings of their own: each brings its duration, order and easing, and the cards in view settle within about 0.8 seconds (Give your grid a little motion has them live).
A grid made before 4.0 keeps its entrance: a classic one, such as Reveal one by one, shows as one more tile, Classic and its name, for as long as the grid keeps it. A grid on the classic front end offers the classic entrances instead (Reveal one by one, Fade in, Slide up, row by row, Slide in from the side) and Custom with the details:
| Setting | What it does |
|---|---|
| Entrance effect | The effect, such as Fade. |
| Speed | How long one item’s entrance takes, in milliseconds. |
| Delay | The pause between one item and the next. |
| Stagger by | The items come in one by one by Items, by Columns or by Rows. |
A new grid plays its entrance when it scrolls into view: Start in view in Loading › Lazy loading is on. Turn it off to play the entrance when the page loads (Loading and performance). Reveal is not available for a full-screen grid.
Item on hover
Item on hover gives the item under the pointer an effect, such as Zoom In; Other items on hover does something to the other items at the same time. The tiles of the Items page’s Hover section set both in one click (Zoom the item, Lift, Fade the others …); Custom shows the two rows. The hover of a skin’s own layers is part of the skin (Items: skins on a grid and their hover).
Change effect
When a visitor picks a filter, sorts or turns a page, the items rearrange with the change effect. Navigation › Change effect shows the effects as tiles; each plays as a small loop when you point at it. A new grid starts with Glide & scale.
| Change effect | What the items do |
|---|---|
| Glide & scale | The items glide to their new places; the ones that come and go scale a little. |
| Glide | The items glide to their new places; the ones that come and go fade. |
| Spring glide | The items glide on a soft spring; the new ones rise in. |
| Glide & blur | The items glide; the ones that come and go blur. |
| Crossfade | The grid fades from the old items to the new ones; nothing travels. |
The five have no settings of their own: each brings its timing and ends within about 0.6 seconds.
A grid made before 4.0 keeps its change effect: a classic one, such as Fade, shows as one more tile, Classic · Fade, with its Speed, Delay and Stagger by, for as long as the grid keeps it. A grid on the classic front end offers the classic effects instead (Fade, Scale, Slide sideways, Fall, Rotate and scale) and Custom with the details.
The change effect has no off: it is how the items move to their new places.
While the grid loads
Loading › Loading indicator sets what shows until the items come: Off, Skeleton (placeholder cards in the grid’s layout, with a soft shimmer) or Line (a thin line along the grid’s top edge). A new grid starts with Skeleton. More in Loading and performance.
On the page
In new 4.0 grids:
- effects play for the mouse, the keyboard and a tap; on touch screens the first tap on an item shows its hover, the next one opens its link;
- visitors who ask their system for reduced motion get no movement: no entrance, the hover’s end state at once, after a filter a quarter-second fade instead of the change effect, a still loading indicator, and the window scrolls without a glide.
Good to know
- An effect that plays on the preview while you pick it never plays when your system asks for reduced motion.
- More about keyboards, screen readers and reduced motion: Accessibility and reduced motion.