Motion That Whispers Instead of Shouts

Animation on the web exists on a spectrum. At one end are loud, attention-grabbing effects that demand a reaction; at the other lies stillness. Between them sits ambient animation: slow, seamless motion that subtly enriches a design without calling attention to itself. In a follow-up to his earlier exploration of ambient motion, designer Andy Clarke demonstrates how this approach works across three distinct projects — a composer's portfolio, a character-driven site, and a corporate skyline — each exploiting motion as a quiet extension of brand personality.

From Comic Book Covers to Concert Halls

For Los Angeles composer Reuven Herman, the goal was not simply to display a portfolio, but to evoke the experience of collaboration. Drawing visual inspiration from mid-century album cover designer Alex Steinweiss, Clarke built layered illustrations in which every element animates at its own pace, producing a parallax-like depth:

  • Sheet music stave lines morph smoothly between wavy and straight states.
  • Rows of musical notes drift at speeds ranging from 100 to 400 seconds.
  • Piano keys float and rotate; their shadows turn in the opposite direction at the same time.

To prepare SVGs for this sort of work, Clarke exports and optimises one set of elements at a time, in their final stacking order, building the master file gradually. The stave lines, for example, are exported first in their wavy form, then again in their straight state. Morphing between those two path configurations benefits from the flexibility of the GSAP animation library, which — unlike CSS — does not require each state to have matching numbers of points. A GSAP timeline then repeats the transition backwards and forwards over a six-second cycle.

This layering approach mirrors sound mixing, with deliberate variation in rhythm and timing across layers. The result is a design that feels animated but never competes with the content it frames.

Character-Driven Storytelling

Not every project calls for cartoon characters, but when a composer like Mike Worth specifically asks for one, ambient motion can shift from atmospheric to narrative. Clarke illustrated the character of Orango Jones, an orangutan adventurer featured on every page of Worth's site. On the “About” page, Orango stands in a cave holding a magnifying glass over a stone tablet etched with faint navigation markings.

An easter egg hinging on this magnifying glass ties motion to interaction. Pressing it toggles the value of a data-lights attribute on the SVG. Two descendant selectors in the CSS respond to that value, adjusting the opacity of overlaid light shafts. When active, the shafts also rotate slowly and subtly, mimicking natural light.

Interactive touches like this raise two implementation concerns. First, performance: even lightweight CSS animations can strain lower-powered devices when combined with blur filters or drop shadows. Second, accessibility: pages must respect the prefers-reduced-motion preference, and purely decorative animations should carry aria-hidden="true" so they stay out of the accessibility tree. When these checks are met, interaction-driven ambient animation becomes a layer of storytelling rather than a distraction.

Subtle Distinction for a Conservative Sector

Property investment sites tend toward interchangeable stock imagery — city skylines and handshakes. For EPD, Clarke deliberately moved in the opposite direction with graphic, stylised skylines constructed from varying circles reminiscent of the company's logo. Three city scenes (Dubai, London and Manchester) each animate in restrained ways: circles change colour at random intervals, and wheels rotate steadily.

In each skyline, the base paths are exported sans wheels, then a separate layer holds the circles slated for colour shifts. GSAP selects groups of those circles and, at intervals of two seconds, alters the CSS transition so their fill shifts from a teal accent to the illustration's off-white. The flickering reads as distant city lights. Rotating the wheels, by contrast, uses no library at all. A plain CSS rotate declaration handles that simple, repetitive cycle efficiently.

This split reveals the broader tool choice at work: GSAP offers precision for morphing and sequenced timelines, while CSS provides a lightweight, dependency-free route for simple self-repeating fades and rotations. The right option depends on whether the goal is choreography or a straightforward loop.

The Commons Thread

Across all three examples, the same discipline applies: motion stays slow, seamless and purposeful. Whether reinforcing a composer's creative energy, advancing a character's quiet adventure, or giving a corporate skyline room to breathe, ambient animation ultimately succeeds by remaining in the background. It enhances the atmosphere — and leaves the spotlight where it belongs.