Log inGet Started

What is the Builder

Overview of the Motion.page visual animation builder — available as a WordPress plugin and Desktop app.

Motion.page Builder is a visual animation editor that lets you design, preview, and publish production-ready animations — no code required. Every animation you configure is powered by the Motion.page SDK.

Motion.page Builder workspace — Left Panel, Frame View, Timeline Editor, and Top Panel

How It Works

  1. Select an element

    Click any element in the Frame View. The Left Panel loads its animation settings.

  2. Configure the animation

    Choose what to animate (opacity, position, scale, color, SVG strokes, text, and more) and set your values in the From, To, or Set tabs.

  3. Pick a trigger

    Scroll into view, hover, click, page load, mouse movement, gesture, or custom cursor. Each trigger has its own set of controls in the Left Panel.

  4. Publish

    Hit publish. Motion.page injects the animation runtime and your configuration. Done.

Left Panel — animation properties and trigger configured on a selected element

What You Can Animate

Visual Properties

Configure in the From, To, or Set tabs of any animation node:

Property What It Does
Opacity Fade in & out
Translate Move on X and/or Y axis
Scale Grow or shrink — uniform or per-axis
Rotation Rotate on any axis; positive = clockwise
3D Transform Rotate and transform on the 3D plane
Skew Shear distortion on X and/or Y
Dimensions Animate width and/or height
Background Color Animate the background color
Text Color Animate the font color
Border Color Animate the border color
Filter Blur, grayscale, brightness, and other CSS filters
Background Position Animate background-position for parallax effects
Transform Origin Set the pivot point for transform animations
Custom Any animatable CSS property or CSS variable

Special Effects

These live in the Functional section — direction-agnostic and shared across From/To:

Effect What It Does
Animate SVG DrawSVG stroke reveal plus stroke/fill color animation
Lottie Sync a Lottie animation with the timeline
Image Sequence Play a frame sequence on any trigger
Text Splitter Split into chars, words, or lines and stagger each piece
Text Flapper Solari split-flap board effect cycling through characters
Fit FLIP morphing — animate an element toward another’s position and size
Motion Path Move any element along an SVG path
Stagger Offset timing across multiple targets
Repeat Loop any number of times or infinitely, with optional yoyo
Ease Choose from any easing curve

Triggers

Every animation needs a trigger. The builder covers the full set:

Trigger Description
Page Load Plays as soon as the page JS loads
Scroll Plays on scroll-into-view, scrubs with the scrollbar, or pins in place
Hover Plays on mouse enter — reverse, restart, or hold on leave
Click Plays on click — reverse or restart on second click
Mouse Movement Timeline progress tracks cursor position
Gesture / Observer Responds to pointer, touch, wheel, and scroll gestures
Cursor Custom animated cursor with hover and pressed states
Page Exit Plays when a link is clicked, before the page navigates away
Presentation Mode Full-page section scrolling with transition effects

This is the kind of animation the Builder produces — a staggered card reveal on page load:

In the builder, this is three clicks: select the cards, set from: { opacity: 0, y: 32 }, add a stagger, and pick Page Load as the trigger.

Two Ways to Run It

WordPress Plugin

Install Motion.page as a WordPress plugin. The builder opens directly in the admin dashboard — click Edit with Motion.page on any page or post. Animations attach to your existing WordPress content and are published alongside it.

→ WordPress Installation

Desktop App

The standalone Electron app works with any website — WordPress, Webflow, custom HTML, or anything else. Open a URL in the Frame View, build animations, and export the output to embed wherever you need it.

→ Desktop Installation

Under the Hood

The Builder generates SDK code for every animation you configure. There is no proprietary runtime format — what gets published is clean @motion.page/sdk calls that you can read, copy, and extend.

Generated SDK output 
Motion('hero-reveal', '.hero-section', {
from: { opacity: 0, y: 40 },
split: 'words',
stagger: 0.06,
duration: 0.7,
ease: 'power2.out',
}).onPageLoad();

If you ever outgrow the builder’s UI, take the generated code and continue in your editor. No lock-in.

Next Steps