Builder Documentation
Visual animation editor for WordPress and Desktop. Point, click, animate.
Getting Started
Interface
Workspace Overview Tour of the builder interface — panels, preview, timeline, and navigation.
Top Panel Toolbar controls — undo/redo, device preview, zoom, playback, theme, and CDN toggle.
Left Panel Animation configuration — tabs, From/To/Set, selectors, folders, and trigger section.
Timeline Editor Visual timeline — nodes, duration, sequencing, drag-to-resize, and playhead controls.
Element Selection Choose animation targets — click-to-select, CSS selectors, multiple selectors.
Animation Properties
From, To & Set Understand the three animation modes and how to switch between them.
Opacity Configure opacity animations in the builder UI.
Translate Move elements with the translate controls — X, Y, units.
Scale Scale elements with uniform or independent X/Y controls.
Rotation Rotate elements on X, Y, and Z axes with the builder rotation controls.
3D Transforms Apply 3D perspective transforms to elements in the builder.
Skew Apply skew distortion to elements on the 2D plane.
Dimensions Animate width and height of elements in the builder.
Background Position Animate background position for parallax and sliding background effects in the builder.
Background Color Animate background colors between any two values in the builder.
Text Color Animate font and text colors between any two values in the builder.
Border Color Animate border colors between any two values in the builder.
Filters Configure CSS filter animations like blur, grayscale, brightness and more in the builder UI.
Custom Properties Animate any CSS property using the Custom Properties panel in the builder.
Presets Browse, preview, and apply built-in animation presets.
Transform Origin Set the origin point for transform animations in the builder UI.
SVG Animate SVG elements with DrawSVG, stroke color, and fill color in the builder.
Timing & Sequencing
Easing Select easing curves from the visual easing picker to control animation acceleration and deceleration.
Stagger Configure stagger for multiple-target animations.
Repeat & Yoyo Loop animations with repeat count, infinite looping, and yoyo.
Duration & Delay Control animation timing by setting duration and delay for animation nodes in the timeline.
Special Features
Text Splitter Split text into chars, words, or lines for per-element animation.
Text Flapper Create Solari split-flap display effects that cycle through characters before landing on the target text.
Lottie Sync Lottie Player animations with your Motion.page timeline.
Image Sequence Play frame-by-frame image sequences on a canvas element synced to your timeline.
Fit Morph one element's position and size to match another element on the page.
Motion Path Animate elements along SVG paths with align, auto-rotate, and range controls.
Timeline Control Control other timelines from within a timeline — play, pause, reverse, restart.
Triggers
Page Load Configure auto-play on DOM ready or full page load.
Scroll Trigger Set up scroll-based animations with start/end positions, scrub, toggle actions, pinning, and per-element iteration.
Page Exit Run animations when the user navigates away from the page using the Page Exit trigger.
Hover Configure hover animations with single and multi-target modes, and control what happens on mouse leave.
Click Configure click animations with toggle support.
Mouse Movement Animate elements based on cursor position with axis and distance modes, scoped selectors, and smooth transitions.
Observer / Gesture Detect pointer, touch, wheel, and scroll gestures to drive animations with configurable axes, tolerance, and presentation mode.
Presentation Mode Configure full-page section scrolling with smooth transitions, direction control, and visual effects.
Custom Cursor Create custom cursor effects with smooth movement, state-based styling, hover targets, and multiple cursor instances.
Settings
Breakpoints Configure responsive breakpoints and per-breakpoint animation control.
Smooth Scroll Enable and configure Lenis smooth scrolling — duration, multipliers, easing, and per-page exclusions.
Advanced Targeting Target animations to specific pages using post types, custom URLs, and RegEx patterns.
Library Save, organize, enable/disable, and manage your animation library.
CDN & Bundles Publish animations via CDN and manage custom SDK bundles.