Animation Engine

Parallax

Multi-layer depth parallax driven by the pointer and/or scroll — mark a container as a Scene, give each child a Layer depth, and they drift at different rates for real 3D depth. (For a single element that simply drifts on scroll, see Scroll Motion.)

Live demo

See it in action

Depth layers

Real depth, from a mouse.

Mark a container as a Scene and each child as a Layer with its own Depth. They drift at different speeds as the pointer moves — one shared render loop, no library. Skipped on touch (scroll layers still move).

Move your pointer across this panel

Depth you can feel

The two roles

Scene + Layers

Scene

Mark the stage container as a Scene — driven by pointer, scroll, or both.

Layer

Give each child a Depth: 0 is fixed, higher moves more (reads as closer).

Direction

With or against the pointer — “against” gives the classic background-recedes feel.

Depth blur & scale

Optional depth-of-field blur and scale so deep layers hide their edges.

One render loop

Every layer shares a single loop — smooth, and no external library.

Touch-safe

The pointer source is skipped on touch; any scroll-driven layers still move.

How to set it up

Add it in under a minute

  1. Open a container → Animations → Parallax Layers → set it to Scene (pointer / scroll / both).
  2. Open each child element → Parallax Layers → Layer, and set its Depth.
  3. Tune intensity, smoothing, direction and depth blur.
  4. Save and move your pointer across the scene.
Open the manual