How to animate

Where motion lives

Every block in the editor has an Animation section in the inspector (the right panel) with five slots: how it enters, what it does with the scroll, a loop it repeats, what happens on hover, and — on a section — a moving backdrop. Below it, the Timeline section holds keyframe tracks for moves the slots cannot say, and the Effects section adds effects from the library. The theme adds page-level motion: an intro, a reading progress bar, cross-page transitions and a level dial (none / subtle / lively). Everything you set here is rendered the same way on the canvas in play mode, in the preview and on the published page.

Two keys matter: P plays the page on the canvas (motion is otherwise held still while you edit), and A opens Animation mode, the timeline under the page.

Simple motion: entrances, scroll, loops, hover, backdrops

Entrances (19): Fade, Fade up, Fade down, From the left, From the right, Scale up, Zoom out, Pop, Unblur, Flip, Wipe, Word by word, Letter by letter, Line by line, Typewriter, Scramble, Highlight, Count up, Draw. Each has a duration, a delay, an easing, a distance, the point in view it starts at, and replay (play again each time it comes back). Stagger on a container (a grid of cards, a row of logos) hands the entrance to its visible children 40–80 ms apart so the group reads as one gesture; on a heading the text kinds (Word by word, Letter by letter, Line by line, Typewriter, Scramble, Highlight, Count up) stagger per word, letter or line. Count up counts the first number in the text; Draw draws the strokes of an SVG shape.

With the scroll (11): Parallax, Fade in, Fade out, Grow in, Shrink out, Rotate, Drift sideways, Wipe with the scroll, Fill the words, Pin (stack under the next), Scroll sideways. These are tied to the block's passage through the viewport rather than played once. The amount means: Parallax: Pixels of drift over the scroll. Positive moves faster than the page (foreground), negative slower (background). (default 80px, -400 to 400); Grow in: Starting size as a percentage (default 85%, 30 to 100); Shrink out: Final size as a percentage (default 85%, 30 to 100); Rotate: Degrees turned across the scroll (default 12°, -180 to 180); Drift sideways: Pixels moved sideways across the scroll (default 60px, -400 to 400). Pin makes a section stick while the next slides over it; Scroll sideways turns a row into a horizontal gallery driven by the vertical scroll. On phones only the wipe, the fill, the pin and the sideways scroll run; the rest rest.

Loops (10): Float, Pulse, Spin, Bounce, Wiggle, Swing, Glow, Gradient shift, Shine sweep, Morph, each with a speed and an amount. A loop rests while the block is off screen. Hover (17): Lift, Grow, Shrink, Tilt, Tilt toward the pointer, Magnetic, Glow, Shine, Zoom the picture, Underline, Dim, Press, Ripple on click, Wiggle, Bounce, Spin, Pulse; the pointer-driven ones (tilt toward the pointer, magnetic, cursor spotlight, ripple) only where a pointer can hover, never on touch screens. Backdrops on a section: Drifting orbs, Aurora, Particles, Sliding pattern, Morphing blob, Cursor spotlight — they animate the section's decoration layer, the band's gradient or a particle layer behind the content.

Page motion in the theme: an intro (Fade in, Curtain, Logo, then curtain) that holds entrances until the curtain lifts; a reading progress bar; cross-page transitions; and {one|two|three} in any copy rotates the words. The motion level none strips every motion attribute from the published page; lively makes every distance 1.6× longer.

Taste: ask first whether it should move at all. The hero may reveal and at most one other section a page; one heading word by word, one grid staggered, one picture drifting, one backdrop. Entrances ease out on a strong curve (smooth, out, inOut, spring, linear are the curves), never linear, never ease-in; nothing appears from nothing (a scaled entrance starts near full size, paired with a fade). The editor's defaults already follow this; the AI builder is held to the same rules.

Keyframes and the Timeline section

For a move the named kinds cannot say, a block carries tracks: one per driver — view (When it comes into view), load (When the page opens), scroll (With the scroll), hover (Under the pointer) — each a list of keys. A key sits at a time t from 0 to 1 of the track and sets any of nine channels: x move across (px), y move down (px), scale scale (×), rotate rotate (°), rx tilt back (°), ry tilt side (°), skew skew (°), opacity opacity, blur blur (px). A channel a key leaves out is interpolated from the nearest keys that have it and rests past the first or last key that has it, the way CSS keyframes read. The ease on a key is the curve into it; step holds the previous pose and jumps.

Per track: view and load have a duration (100–20000 ms), a delay, repeat (−1 loops forever and rests off screen), back and forth, and a default ease; view also has starts at (how much must be in view) and replay; scroll scrubs the keys along the block's passage (0 as its top enters at the bottom, 1 as its bottom leaves at the top; from / to narrow that); hover plays forward under the pointer and back when it leaves. When a block has several tracks, moves add, scales and opacities multiply, the bigger blur wins. A block with tracks runs on them alone — its simple entrance, scroll effect, loop and hover are not rendered (a backdrop still is); From the animation above converts the simple settings into tracks so nothing is lost.

The Timeline section in the inspector: presets (when it comes into view: Fade up, Slide in from the left, Pop, Drop and settle, Unblur, Flip up, Float (loop), Spin (loop), Breathe (loop); with the scroll: Parallax (scroll), Zoom in with the scroll, Turn as it passes, Fade out at the top; under the pointer: Lift (hover), Tilt (hover), Wobble (hover)), + Track, From the animation above, Clear timeline. Each track shows its strip — click the line to add a key where you clicked (it takes the pose the track already has there, so adding one changes nothing until you edit it), drag a diamond to retime it, click one to select it — and the playhead under the strip scrubs the block through the track on the canvas. The selected key's nine channels sit below (a highlighted field is set on this key, a plain one is interpolated), with the ease into it, Unset and Delete key. ▶ on the panel plays the block's timeline; P plays the page. Every change is one undo step.

What it costs: the keyframe runtime (about 4 KB) is added only to pages that have a track; it writes transform, opacity and filter — compositor properties, no layout — and runs a frame loop only while a time track is playing. A view or load track's first pose is in the stylesheet, so a block that starts hidden never flashes in place first. Without JavaScript the page is a plain document with everything visible.

The effect library and the budget

Effects are bigger set pieces than block motion — things that paint on a canvas, follow the pointer or take over a band — in five packs. Two shapes: a layer is an Effect block (palette → Effects) dropped into a section, filling the band behind the content or standing as a band of its own; an element effect goes on an existing block from its Effects section (a marquee on a row, spring letters on a heading, stacked cards on a column of boxes, a route on an SVG shape, the cursor on a section). Each effect has sliders (speed, colours, counts, sizes…) and a phone mode: runs, one still frame, or off.

• Shader sky (layer, 5 points, phones: one still frame): Ribbons of colour folding through noise, lit by the pointer and dimmed as the page scrolls. WebGL.
• Gradient mesh (layer, 2 points, phones: runs): Soft blobs of colour drifting over each other.
• Drifting orbs (layer, 1 point, phones: runs): Large glowing circles that wander slowly. CSS only.
• Light rays (layer, 2 points, phones: one still frame): Beams sweeping from a point, like stage lights.
• Waves (layer, 2 points, phones: runs): Layered sine waves rolling along the bottom of the band.
• Perspective grid (layer, 2 points, phones: one still frame): A floor grid rushing toward the horizon.

• Starfield (layer, 2 points, phones: runs): Stars that twinkle and drift with the pointer.
• Floating particles (layer, 3 points, phones: runs): Dust that floats up and scatters from the pointer.
• Snow (layer, 2 points, phones: runs): Flakes falling and swaying.
• Confetti burst (layer, 2 points, phones: runs): A burst of paper when the band comes into view (and on click).
• Film grain (layer, 1 point, phones: one still frame): Animated noise over the band, like film.

• Spring letters (element effect, 2 points, phones: runs): The letters drop in on springs and dodge the pointer.
• Particle words (element effect, 4 points, phones: one still frame): The words are made of light and morph from one to the next as the band is pinned; the pointer pushes them.
• Odometer (element effect, 1 point, phones: runs): Each digit rolls up like a counter when the figure comes into view.

• Velocity marquee (element effect, 1 point, phones: runs): The row scrolls sideways forever, faster and leaning as the page scrolls. On a row of children.
• Stacked cards (element effect, 1 point, phones: runs): The children stick and stack as the page scrolls, each sinking back as the next arrives. On a column of children.
• Pinned sideways gallery (element effect, 2 points, phones: one still frame): The row pins and slides sideways with the scroll; each picture drifts inside its frame and the cards lean with the speed.
• Route that draws itself (element effect, 1 point, phones: runs): The strokes draw along with the scroll while the band is pinned, with a glowing head on the line. On an SVG shape.

• Cursor ripples (layer, 1 point, phones: runs): Rings spreading from every click or tap.
• Picture trails the pointer (element effect, 2 points, phones: off): Hovering a child shows its picture floating beside the pointer. On a list of children with pictures.
• Tilt with a glare (element effect, 1 point, phones: off): The block tilts toward the pointer with a light that follows it.
• Page cursor (element effect, 1 point, phones: off): A ring and a dot replace the pointer on the whole page; links grow it.

The budget. Every effect has a cost in points (shader sky 5, gradient mesh 2, drifting orbs 1, light rays 2, …), a backdrop costs 1, keyframes ½, a loop ½, a sideways or fill scroll ½. The inspector's Effect and Effects sections show This page: N of 12 effect points; over the budget the meter turns red and Publish asks before the page goes live. The runtime for effects is assembled per page from the kinds it uses (a page without effects ships none), runs one frame loop only while an effect is in view, pauses everything that scrolls away, and on phones each effect follows its phone mode. The shader sky needs WebGL and falls back to its gradient without it.

Animation mode: the timeline under the page

Press A (or the timeline button in the top bar) and a drawer opens under the page, where the code drawer goes. On the left, a layer for every block that moves (and the one you have selected); on the right, its tracks as lanes on a ruler of seconds (zoom the ruler to see more or less):

• a bar for every track that runs on the clock — when the block comes into view or when the page opens — from its delay to its end, with a diamond per key; the simple entrance and a loop are bars too, unless the block has tracks (tracks replace them);
• a chip for a scroll track or a hover track (they are not on the clock);
• the playhead: drag it along the ruler and the whole page is held at that moment — every entrance shown or hidden as it would be, every track between its keys, every loop paused there — frame by frame.

Edit by direct handling: drag a bar to move its track in time; drag a diamond to retime a key; click a bar to add a key where you clicked; double-click a lane to give the block a view track; double-click a bar to open its keys in the inspector. Record (● or R): with a block selected, drag it on the canvas; let go and the path becomes a view track of up to twelve keys over the time the drag took, ready to tidy. The graph of a track is the strip and its keys in the inspector's Timeline section — the same data, two views. Paths: a recorded drag is a path in x and y; a route that draws itself (the effect library) is a path on an SVG shape. The device switch in the top bar (desktop / tablet / phone) applies to Animation mode too: the page is held and played at that width, which is how you see what phones skip.

Shortcuts while the drawer is open: Space play from the playhead / pause · Home / End to the start / the end · ← → a frame back / forward (⇧ a tenth of a second) · K add a key at the playhead on the selected block (a view track is made if it has none) · R record a drag · Delete remove the selected key · ⇧⌘C / ⇧⌘V copy a block’s tracks, paste them onto another · Esc close. Every change is one undo step and is saved with the document; the inspector's Animation and Timeline sections show the same data.

Calm mode: the pause button and reduced motion

People who find motion hard to look at get a calm version of every site. A published page that moves — an entrance, a scroll effect, a loop, a backdrop, a track, an effect or the theme's intro — carries a round pause button in its bottom-left corner, drawn in the site's own colours and reachable by keyboard (Tab to it, Enter or Space presses it; it announces itself as Pause motion / Play motion). Pressed, everything rests at once: every entrance is shown at rest, scroll effects stop following the scroll, loops and backdrops stand still, keyframe tracks jump to their last pose, every effect becomes one still frame (and the page cursor goes), the intro is skipped and the words stop rotating. Pressed again, the page moves on.

The choice is remembered on that device for the whole site (every page of it, every visit) until the visitor changes it. A visitor whose system asks for reduced motion starts calm on every page without touching anything; pressing Play motion there says "I want this site to move" and wins over the system setting, on this site only. The site's owner chooses in Site settings → Motion whether the button appears on pages that move (the default), on every page, or never; the reduced-motion behaviour stays whatever the setting.

For the person building the site nothing changes: the canvas never starts calm, and the preview behaves like the published page. The nightly self-check presses the button on a page with every kind of motion and fails if anything keeps moving.

What the AI builder does with motion

The builder's grammar is the simple engine. In a build, each section's brief carries a motion line — what the heading does, how the items cascade, whether the picture drifts, what cards do on hover, whether the band has a backdrop — and the composed page writes it as data-in, data-stagger, data-scroll, data-loop, data-hover and data-backdrop on the elements, which become the same Animation settings you would set by hand. It may put one custom move a page on keyframes, for the page's signature moment. Everything it writes goes through the same clamps as the inspector, so nothing odd lands in the document.

The design standard holds it back on purpose: one orchestrated moment a page, staggers of 40–80 ms, strong ease-out, a reason for every move that fits in one phrase. The review loop looks at screenshots of the finished pages and removes motion that reads as decoration. Ask the editor's assistant in your own words — "make the cards appear one by one", "let the picture move slower than the page", "stick this section while the next slides over it", "float the badge gently" — and it maps them onto the grammar (the vocabulary it understands is the one above). The assistant does not write effects from the library on its own; drop those in yourself.

This page answers questions too: the box below reads this guide and the studio's animation notes and answers in a few sentences. It is for how the studio's motion works, not for general web design.