Chapter 10.0

Motion

One moment per page, one ease, and nothing that moves for its own sake.

  1. 10.1One moment, one ease
  2. 10.2The plan plants itself
  3. 10.3Name block and score bars
  4. 10.4Page to page
  5. 10.5Hover and focus
  6. 10.6Colour fields wipe
  7. 10.7When nothing moves

10.1 · One moment, one ease

Each page moves once.

Motion on WILS is a planting. Things arrive in order, settle, and then stay still. Each page has one authored moment and nothing else moves on its own. After that, only what the visitor touches responds.

Everything that arrives uses one curve: fast out of the gate, long settle, no overshoot. Only the page-out fade uses a second, plain curve. Only opacity, transform and clip-path ever animate. Colour changes only on hover and focus.

Durations
WhatTimeCurve
Hover, focus200 msLinear, colour only
Page out160 msOut curve, opacity only
Page in360 msBrand curve, rises 8 px
Picture travels440 msBrand curve
A moment700 msBrand curve, staggered 45 to 90 ms per item, at most ten items
Rule

No bounce, no spring, no overshoot, no looping. If something keeps moving, it is wrong. The one exception is the globe, which turns slowly until it is touched.

Brand curve. cubic-bezier(.16, 1, .3, 1). Everything that arrives.
Out curve. cubic-bezier(.4, 0, 1, 1). The 160 ms page-out fade only.

The two curves and the five durations, in milliseconds, drawn to one scale.

10.2 · The plan plants itself

Beds first, then the plants.

On the home page the planting plan is the one moment. Each bed grows from the start edge in 600 ms, one 120 ms after the next. As a bed opens, its grid fades in and its plants pop into place at 35 ms apart, from the first cell to the last. The whole plan takes about two seconds and then stays still.

The same moment runs once on the type pages and the Not found page. It never repeats on scroll or on hover, and it never runs on a plant sheet, where the plan is part of the name block.

Rule

Beds scale from the start edge. Plants scale from their own centre. Nothing fades in from grey.

Reduce motion is on in your system, so the moment is shown finished.

A mixed plan, four beds, two rows. Trees, Groundcovers, Palms, Shrubs.

10.3 · Name block and score bars

The name wipes in, the bars fill.

The plant sheet opens with the name block wiping in from the start edge over 700 ms, in the plant’s group colour. Then the score bars fill: each cell scales from the start edge in 450 ms, 300 ms after the page, row by row at 45 ms and cell by cell at 35 ms.

That is the whole moment. The picture, the rows and the photographs are simply there.

Rule

The binomial does not type itself, slide or fade on its own. It arrives with its field.

Shrub · Apocynaceae

Nerium oleander

Oleanderدفلى

  • Water useLow to moderate
  • Growth rateFast
  • SunFull sun
  • Drought toleranceVery high
  • Salt toleranceHigh

Reduce motion is on in your system, so the moment is shown finished.

A shrub’s name block and five score bars.

10.4 · Page to page

The picture travels. The header stays.

Moving between pages is a cross-document view transition. The old page fades out in 160 ms. The new page fades in and rises 8 px in 360 ms. The header does not move at all.

From a card to its plant sheet, the picture is the one thing that travels: it leaves the card’s frame and lands in the sheet’s plate in 440 ms. On the way back it returns to its card. Nothing else is shared between the two pages.

Links prefetch on hover, so the next page is usually ready before the transition starts.

Rule

Only a picture travels, and only between a card and its sheet. The wordmark, fields and text never travel.

WILS

Reduce motion is on in your system, so the pages switch without a transition.

Browse to plant sheet and back. The picture is the only shared element.

10.5 · Hover and focus

Everything you can press answers in 200 ms.

Hover and focus are the only motion a visitor causes directly, and they are small. A colour change takes 200 ms. A bar, a ring or a nudge uses the brand curve at 300 ms. Focus is always the 2 px Delta Teal ring; it does not animate.

Responses
Nav linkA 2 px Ink bar grows from the start edge under the link.
ButtonInk turns Delta Teal. Teal turns Ink.
CardA 2 px inset ring in the group colour; the picture grows to 104 %.
RowThe row fills with the Delta Teal tint; its arrow moves 6 px forward.
Group linkThe dot grows to 140 %; the text turns Ink.
Menu buttonThree bars become a cross in 300 ms.
Nav linkCountries
Button

Live. Hover or tab through them.

10.6 · Colour fields wipe

A field is never faded in.

A colour field arrives by wiping from the start edge, 700 ms on the brand curve, as if it were being painted. Several fields stagger by 90 ms. The text on a field arrives with it, not after it.

In Arabic the start edge is the right, so every wipe mirrors. The same is true of the bars and the plan.

Rule

Fields never fade from white or grey, never scale, never slide up. They wipe.

  • Surfaces

    Paving · Play surfaces

  • Edges & walls

    Edges and kerbs · Walls and steps

  • Water & soil

    Drainage · Tree pits and grates

  • Furniture & light

    Street furniture · Lighting

Reduce motion is on in your system, so the fields are shown finished.

The four hardscape fields wiping in. Tick Mirror to see the right-to-left version.

10.7 · When nothing moves

Still is the default.

When a visitor has asked their system to reduce motion, every authored moment, stagger and page transition is off and the page is simply there, finished. Hover colour changes stay. The globe does not turn.

Some things never move, in any setting: the wordmark, a drawing on its plate, and text once it is readable.

WILS
Do

Leave the wordmark still. It never animates, loads or draws itself.

Do

Wipe fields from the start edge, staggered by 90 ms.

Do

Let a drawing be there. It travels between pages, but it never sways, grows or draws itself.

Don’t

Add shadows, rounded corners or a lift on hover. Nothing floats.

Albizia le|
Don’t

Type text out, fade it word by word, or slide it in from the side.

Don’t

Bounce, spring, overshoot or loop. One curve, one pass, then still.

Three to keep, three to refuse.