Skip to main content

Motion vocabulary

"3D motion" is a fuzzy phrase that covers several very different techniques. Here's the working vocabulary — because the words map directly to the tools and the roadmap.

Scroll-driven animation (the umbrella)​

Any animation whose progress is tied to the scroll position rather than to a clock.

  • Scrollytelling / beats — a page that advances through discrete "beats" of a story as you scroll: text scrolls past a pinned visual that changes per beat.
  • Scrub — the animation's playhead is wired directly to the scrollbar. Scroll down plays it forward; scroll up rewinds it, frame-for-frame. This is what makes a camera move feel controlled by scroll.
  • Pin — an element is frozen in place for a set scroll distance while things animate over or through it.
  • The premium recipe = pin + scrub + a sequenced timeline. A section locks, a choreographed timeline plays across the pinned range, then releases. Almost every high-end scroll section is this.
The premium scroll recipe A section is pinned in place while a timeline scrubs with the scroll position, playing its beats across the pinned range, then releases. PIN + SCRUB + TIMELINE SCROLL PINNED — STAYS FIXED beat 1 beat 2 beat 3 releases
The section pins, a timeline scrubs with your scroll — its beats play across the pinned range — then it releases.
You can already do this

Scroll Motion gives you genuine pin + scrub, and Scroll Story gives you the pinned, beat-based cinematic stage.

Motion timeline​

A tool concept: the ability to sequence and keyframe several animated properties on one shared time axis — like After Effects or a video editor — with an easing curve per keyframe. Two flavours:

  • Code timeline — you write the sequence in JavaScript (GSAP's gsap.timeline()). This is the reference implementation, and the engine already uses it internally.
  • Visual timeline / sequencer — a GUI with tracks, keyframes and easing handles you scrub and edit live (like Theatre.js Studio, Rive's editor, or Spline's timeline). "Proper motion timeline" usually means this kind.

Real 3D vs "CSS 3D"​

  • Real 3D (WebGL) — a GPU-rendered scene on a <canvas>: real geometry, lights, cameras, materials and shaders. True depth, reflections, particle clouds. Costs GPU and battery. This is what WebGL Object and Model Viewer use.
  • CSS 3D ("fake 3D") — DOM elements tilted in a perspective box with transform: rotate3d / translateZ. Cheap, accessible, perfect for card flips, tilt, layered parallax depth and turntable-style rings — but they're flat planes in perspective, not a rendered scene. The 3D Gallery and Flip Card live here.
Real 3D versus CSS 3D CSS 3D is flat planes tilted in a perspective box — cheap and accessible, good for cards, tilt and rings. Real 3D (WebGL) is a camera moving through real geometry — true depth, lighting and reflections. CSS 3D — "fake" depth Flat planes tilted in a perspective box Cheap · accessible · cards, tilt, rings Real 3D (WebGL) A camera moving through real geometry True depth · lighting · reflections vs
Both are legitimate — CSS 3D gives lots of "depth" for almost no cost; real WebGL is reserved for the moments that truly need a rendered scene.

Both are legitimate. CSS 3D delivers a lot of "depth" for almost no performance cost; real WebGL is reserved for the moments that truly need a rendered scene.

The rest of the words​

TermWhat it means
Camera movesDolly (push in/out), pan, orbit, fly-through. Scrubbing a WebGL camera along a path = the "cinematic scroll."
ParallaxBackground layers move slower than foreground for a sense of depth.
ParticlesMany small sprites driven by math/physics — dust, sparks, morphing point clouds.
Shaders (GLSL)Tiny GPU programs that create distortion, liquid/gooey, gradient-mesh and image-transition effects.
PhysicsSpring/inertia simulation — weighty cursor followers, magnetic buttons, draggable momentum.
Page transitionsAnimating between pages instead of a hard reload (fade / slide / morph).

Next: what the engine can do with all of this today →