Animation Engine

Parallax Scene

A layered image “diorama” — stack foreground/background layers that drift at different depths on scroll, reveal on entrance AND leave on exit as the scene scrolls past, and gently sway. Built for art-directed heroes and scenic backdrops. Each layer is anchored (usually to the bottom edge) with its own depth, entrance/exit and sway; a self-contained runtime, reduced-motion safe.

Live demo

See it in action

Layered depth

A scene with real depth.

Add the Parallax Scene element (Media Elements), stack image layers, and give each a parallax depth, an entrance direction and an optional idle sway. Scroll the demo below — the front layers travel more than the back ones, and each layer reveals as it enters view and leaves again as the scene scrolls out.

Pinned — the “Kage” hold

Now pin it, and hold.

The same scene, one setting changed: Placement → Pinned. Instead of drifting past, the diorama locks to the screen and holds full-screen while you keep scrolling — the layers stay put, breathing gently — and then, at the end of its hold, they rise and blur away as the next section takes the screen. This is the effect behind sites like Kage: a foreground that stays with you through a whole “chapter,” then dissolves. Keep scrolling ↓

The hand-off

This section is what it dissolved into.

Because the pinned scene held for its whole runway and only let go here, the transition reads as a cross-dissolve between chapters — not a section sliding past. Scroll back up to watch it re-form and pin again.

How to set it up

Add it in under a minute

  1. Add the Parallax Scene element (Media Elements).
  2. In Layers, add each image back-to-front — anchor it (bottom edge is typical), set a width and z-order.
  3. Give each layer a parallax depth (0 = fixed), an entrance and an exit (rise / from-side / fade / scale — Exit “leave the way it entered” mirrors the entrance) with a delay to stagger, and an optional sway.
  4. In Scene, choose placement — In flow (scrolls past), Fixed (content scrolls over it), or Pinned (the “Kage” hold: locks to the screen, holds for the Hold length you set, then dissolves) — plus height and motion source. Save.
Open the manual