WEB BUILDER / MOVEMENT

Movement, used only where it helps.

Every effect is optional and turns off when the visitor has reduced motion turned on. Scroll the page to see each one.

SCROLL ANIMATIONS · SEVEN KINDS

Content that appears as you scroll.

Each card below appears in a different way the first time it comes into view.

Fade

Fades in.

Rise

Rises and fades in.

Drop

Drops and fades in.

From the left

Slides in from the left.

From the right

Slides in from the right.

Grow

Grows slightly and fades in.

Focus

Comes into focus.

BACKGROUND SHAPES

Up to three large blurred shapes in the brand's colours drift slowly behind a section, like the three behind this one.

HOVER EFFECTS

Hover over a card below, or move to it with the Tab key.

Lift

The card rises slightly and casts a shadow.

Glow

An outline and soft glow in the brand colour.

Enlarge

The card grows slightly.

Tilt

The card tilts slightly, as if seen from an angle.

Shine

A light sweeps across the card.

The three movements for page openings (slow zoom, scrolling background and shifting colour) are on the page openings example.