Log inGet Started

Workspace Overview

Tour of the builder interface — panels, preview, timeline, and navigation.

The Motion.page builder is split into four regions: a Top Panel toolbar, a Left Panel for configuration, a central Frame View with your live site preview, and a Timeline Editor at the bottom for arranging animation nodes.

Builder workspace overview

Top Panel

The Top Panel runs across the full width of the builder and holds global controls.

Top Panel toolbar

Left group — History & View

Button Shortcut What it does
Fullscreen — Hides the Left Panel, expanding the preview to fill the full width
Refresh — Reloads the preview iframe with the current page
Undo Ctrl+Z / Cmd+Z Undoes the last builder action
Redo Ctrl+Shift+Z / Cmd+Shift+Z Redoes the last undone action

Center — Device breakpoints

The four breakpoint buttons (Mobile, Tablet, Laptop, Desktop) set the preview iframe width to the corresponding pixel value defined in your site’s breakpoint settings. The active breakpoint is highlighted.

Use these to verify that your animation looks correct at each viewport size. The Breakpoints section in the Left Panel lets you enable or disable an animation for specific breakpoints.

Right — Global Settings

The cog icon opens the Global Settings fly-out panel. This is where you configure site-wide options: tooltip visibility, builder theme, CDN loading, Lenis smooth scroll, breakpoint widths, WordPress integration, and white-label settings.

Left Panel

The Left Panel holds all animation and trigger configuration. It has three tabs at the top: Builder, Library, and Artifact (desktop only).

Left Panel — Builder tab

The nav bar at the top of the Left Panel contains the Motion.page logo and the tab switcher.

  • Logo — On the desktop app, clicking the logo opens the Project Dashboard.
  • Builder tab — The main configuration view (described below).
  • Library tab — Lists all saved timelines for the current site or project. Each item shows the timeline name, page, and trigger type, with actions to load, duplicate, or delete it. Use Refresh Library (in the footer) to sync after external changes.
  • Artifact tab (desktop only) — For managing animation artifacts.

AnimationName section

At the top of the Builder tab:

Control What it does
New (+) Creates a new timeline
Timeline name Editable text input — rename the current timeline
Duplicate Duplicates the current timeline
Page selector Choose which page this animation loads on
Global toggle When enabled, the timeline loads on every page of the site
Advanced Targeting Collapsible section — filter by post type, category, or regex URL pattern

Trigger section

The Trigger section defines what causes the animation to play. Choose a trigger type from the dropdown, then configure its settings:

Trigger type When it fires
Page Events On page load or when the page is fully loaded
ScrollTrigger As the user scrolls — supports scrub, toggle actions, pin, and markers
Interactions On hover or click of a target element
Scroll Smooth scroll / scrub driven by scroll position
Mouse Follower Replaces the cursor with a custom animated element
Cursor Tooltip Shows a tooltip that follows the cursor
Gesture Responds to swipe and drag gestures via the SDK’s gesture engine

Note: The Mouse Follower and Cursor Tooltip triggers hide the Timeline Editor — those animations are not time-based.

Animation section

The Animation section is where you define what gets animated and how.

  • Selectors — One or more CSS selectors identifying the elements to animate. Click the scanner icon (Selector Detector) to pick elements interactively in the Frame View.
  • FROM / TO / SET switcher — Controls the tween type:
    • FROM — Properties define the starting state; elements animate from these values to their natural state.
    • TO — Properties define the ending state; elements animate from their natural state to these values.
    • SET — Zero-duration instant set. Immediately applies the properties without animation.
  • Animation property panels — Collapsible sections for each property type: Translate, Rotation, Scale, Skew, Opacity, Filter, Dimensions, Border, Custom CSS, Ease, Repeat, Stagger, Transform Origin, 3D Transform, SVG Draw, Lottie, Class Manipulation, Text Splitter, Background Position, Image Sequence, Motion Path, and more.
  • Presets — Quick-apply common animation patterns.

Tip: Right-click the FROM or TO button to reveal additional tween options.

Breakpoints section

The Breakpoints section lets you enable or disable this animation at specific viewport sizes. Useful for mobile-only or desktop-only effects.

The footer at the bottom of the Left Panel contains context-sensitive actions:

Control Available on What it does
WP Dashboard WordPress Opens the WordPress admin dashboard
View Frontend WordPress Opens the live frontend in a new tab
Open in Oxygen / Bricks WordPress (if applicable) Jumps to the page editor
Save Timeline All Saves the current timeline. Shortcut: Ctrl+S / Cmd+S
Publish Desktop Publishes the timeline to the Convex backend
Refresh Library Library tab Re-fetches all library items
Save Artifact Artifact tab Saves the current artifact

Frame View

The Frame View is the central region — a live preview of your website rendered inside an iframe (or an Electron webview on the desktop app).

Frame View — live site preview

  • The preview width is controlled by the breakpoint buttons in the Top Panel. When the iframe is narrower than the full container, a checkered pattern fills the side gutters.
  • Element selection — With the Selector Detector enabled in the Animation section, clicking any element in the Frame View inserts its CSS selector into the selectors field.
  • Live preview — Animations play directly inside the preview iframe. Enable Live mode in the Timeline Editor to preview scroll, hover, and click triggers in real time without leaving the builder.

Timeline Editor

The Timeline Editor sits at the bottom of the workspace. It is a horizontally scrollable track where each animation node is a draggable, resizable block. Drag the top edge of the panel to resize it vertically.

Timeline Editor

Playback controls

Control Shortcut What it does
Add Node (+) — Adds a new animation node to the timeline
Loop — Loops playback continuously for preview
Jump to Start — Moves the playhead to 0s
Play / Pause — Plays or pauses timeline playback. Shows current time and total duration (e.g. 0.4s / 2.0s)
Jump to End — Moves the playhead to the last node’s end time
Live — Executes animations live on the page, synced to the trigger (scroll, hover, click)
Click to place — When checked, clicking on the timeline track places a new node at that position

Timeline view controls

Control What it does
Timeline scrollbar Scrolls the timeline horizontally when nodes extend past the visible area
Max duration Sets the maximum visible duration (10s → 20s → … → 70s). Click and drag to adjust.
Zoom Out / Zoom In Changes the horizontal zoom level of the timeline

Working with nodes

Each node on the timeline represents one animation on one set of elements:

  • Drag a node to change its start time.
  • Resize from either edge to change its duration.
  • Click a node to select it — the Left Panel updates to show that node’s animation properties.

The ruler at the top of the timeline shows time in seconds, updating dynamically as you zoom.

How the panels work together

The four regions are tightly connected:

  1. Enter a CSS selector in the Left Panel → Animation section, or click an element in the Frame View with the Selector Detector active.
  2. Configure the animation — set FROM/TO/SET and add property panels in the Left Panel.
  3. See the node appear (or add one manually with +) in the Timeline Editor. Drag it to set the start time and resize it to set the duration.
  4. Press Play in the Timeline Editor to preview the result directly in the Frame View.
  5. Save with Ctrl+S / Cmd+S when done.

Next steps