WordPress Integration
Admin menu, page selection, global timelines, authentication, and WordPress-specific settings.
Motion.page installs as a standard WordPress plugin and adds a full visual animation builder directly inside the WordPress admin — no external editor, no code required.
Opening the Builder
Admin menu
After activation, Motion.page appears in the WordPress admin sidebar. Click it to open the builder dashboard.
The builder renders inside your WordPress admin shell at wp-admin/?page=motionpage.
Edit with Motion.page
Every page and post row in the WordPress admin gets an Edit with Motion.page quick link — it opens the builder with that page already loaded in the frame. This link can be shown or hidden from Global Settings → WordPress.
Authentication
Motion.page uses email OTP authentication — no API key or password.
-
Open the builder
Navigate to WP Admin → Motion.page. If no session exists, the login screen appears.
-
Enter your email
Type the email address associated with your Motion.page account and submit the form.
-
Enter the OTP code
Check your inbox. Enter the one-time code sent to your email address.
-
Access granted
Your session is stored in WordPress. The builder opens automatically. The session persists until you log out or the server clears it.
Logging out — click the user icon in the Top Panel and choose Log out. Your session is cleared from the WordPress database.
No active plan — if your account is authenticated but has no active plan, the builder shows a plan selection screen. Free-tier users can start with a demo project.
Page Selection
Every timeline must be assigned to at least one destination before it runs on the frontend.
Assign a page
Left Panel → Timeline name → Page selector
The dropdown at the top of the left panel lists all pages, posts, and custom post types registered in WordPress. Select a page to attach the current timeline to it.
The list groups entries by post type. The Homepage always appears first regardless of how your front page is configured.
Post types excluded via Disabled Post Types will not appear in this dropdown.
Global timelines
Left Panel → Timeline name → Global toggle
Enable the Global toggle to load the timeline on every page of the site — no page assignment needed. Useful for site-wide effects like nav animations, cursor effects, or persistent scroll triggers.
| State | Behaviour |
|---|---|
| Off (default) | Timeline runs only on the assigned page |
| On | Timeline runs on all pages of the site |
Tip: Global timelines still respect breakpoint settings. Use them together to run site-wide animations only on desktop, for example.
Advanced targeting
For cases where page-by-page selection isn’t precise enough — post categories, custom taxonomies, or URL patterns — use Advanced Targeting in the Left Panel. It lets you target posts by type, category, or a custom regex matched against the URL.
Global Settings — WordPress
Top Panel → Settings (gear icon) → Global Settings
The Settings drawer contains several sections specific to WordPress. Sections not relevant to the current deployment target (WordPress vs. Desktop) are hidden automatically.
WordPress settings
Section: WordPress
| Option | Description |
|---|---|
| Polylang sync | Sync animation assignments across Polylang translation pages. Only visible when the Polylang plugin is active. |
| WPML sync | Sync animation assignments across WPML translation pages. Only visible when WPML is active. |
| Edit link | Show or hide the Edit with Motion.page quick action link in the WordPress pages and posts list. |
| Wipe on uninstall | When enabled, all Motion.page data — animations, database tables, and license — is permanently deleted when the plugin is uninstalled. Irreversible. |
Note: Wipe on uninstall is off by default. Enable it only when you intend to fully remove Motion.page and all its data. There is no recovery after uninstallation with this option active.
Site options
Section: Site Options
| Option | Description |
|---|---|
| Overflow X | Adds overflow-x: hidden to the <body> element. Prevents horizontal scrollbars caused by elements that animate outside the viewport edge. |
| Hash anchor links | Enables smooth, gradual scroll-to-section navigation when a URL contains a #hash on page load. Linked to location.hash detection at runtime. |
White Label
Section: White Label
Rename and rebrand the plugin for client-site deployments. Enable the White Label toggle to reveal all fields.
| Option | Description |
|---|---|
| Name | Replace the plugin name shown in the WP admin. |
| Description | Replace the plugin description shown on the Plugins page. |
| Author | Replace the author name shown on the Plugins page. |
| Icon | Change the plugin icon. Accepts a Dashicon class (e.g. dashicons-admin-site), a base64-encoded SVG starting with data:image/svg+xml;base64,, or a direct image URL. |
| Hide version | Hide the Motion.page version number from the WordPress Plugins page. |
| Hide from menu | Remove Motion.page from the WordPress admin sidebar menu. |
Tip: When Hide from menu is active, the builder is still accessible directly at
wp-admin/?page=motionpage. Use Client Mode (below) for a more complete lockdown.
Client Mode
Section: Client Mode
Client Mode hides Motion.page from the admin sidebar and clears the active session. The next person who accesses the plugin must re-authenticate with their email and OTP code before they can edit animations.
This is useful for handing off a site to a client: they can see the site running but cannot accidentally edit animations without credentials.
To re-enable access: Go to the WordPress Plugins page (wp-admin/plugins.php), find Motion.page, and use the activation link in the plugin row.
Builder options
Section: Builder Options
| Option | Description |
|---|---|
| Tooltips | Show or hide contextual tooltip hints throughout the builder UI. |
| Theme | Switch between dark and light builder themes. |
| Beta updates | Opt in to receive beta plugin updates directly from the WordPress Plugins page. |
| Disabled Post Types | Select post types to exclude from the page selector dropdown. Posts in excluded types will not appear as assignable destinations for timelines. |
Frontend Script Delivery
Motion.page automatically injects animation scripts into pages that have active timelines. No manual <script> tags needed.
How scripts load
When a visitor loads a page, WordPress checks which timelines are assigned to that page (or marked as global). If any are found and active, the following is injected:
SDK mode (recommended) — if wp-content/uploads/motionpage-sdk/sdk-bundle.js exists on your server, it loads as the single script. The SDK bundle contains the complete animation engine and all animation code.
Legacy mode — if no SDK bundle is present, Motion.page loads the legacy runtime with only the plugins your animations actually use (DrawSVG, ScrollTrigger, etc.). This keeps the payload minimal.
prefers-reduced-motion
Animation code is wrapped in a prefers-reduced-motion media query check by default. Visitors who have enabled reduced motion in their OS accessibility settings will not see the animations. This behaviour can be overridden per-timeline if needed.
FOUC prevention
For Page Load trigger timelines, Motion.page injects a visibility: hidden rule on the <body> in the <head>. Once DOMContentLoaded fires and the animations initialise, visibility is restored. This prevents a flash of un-animated content on slow connections.
Lenis smooth scroll
When Lenis is enabled in Global Settings → Smooth Scroll, the Lenis script is injected automatically on all pages (except those in the excluded pages list). The Lenis instance is available at window._mp_lenis for programmatic access.
Compatibility
Caching & optimization plugins
Motion.page scripts are automatically excluded from the optimization pipelines of the most common WordPress performance plugins:
| Plugin | Exclusions applied |
|---|---|
| WP Rocket | Scripts excluded from delay, combine, and minify |
| SiteGround Optimizer | Scripts excluded from combine and async processing |
| WP Meteor | Scripts excluded from delay execution |
No manual exclusion configuration required on your end.
Page builders
Motion.page detects active page builders and adjusts its behaviour accordingly:
| Builder | Detection | Effect |
|---|---|---|
| Oxygen Builder | OxygenElement class or ct_template post type | Footer button → Open in Oxygen Builder; scripts not injected into Oxygen editor previews |
| Bricks Builder | BRICKS_DB_TEMPLATE_SLUG constant | Footer button → Open in Bricks Builder; scripts not injected into Bricks editor previews |
Translation plugins
Polylang and WPML page syncing can be enabled in Global Settings → WordPress. When active, timeline-to-page assignments are kept in sync across translated versions of each page.
Database & Maintenance
Motion.page creates two custom database tables on activation:
| Table | Contents |
|---|---|
wp_motionpage_data | Timeline metadata — name, trigger config, reload behaviour |
wp_motionpage_code | Animation code — generated script, page assignment, global flag, active state |
Rebuild database
If the plugin tables become corrupt or out of sync after an interrupted update, use Rebuild to recreate them without losing data.
WP Admin → Motion.page → Settings → Rebuild Database
Clear cache
Clears the plugin’s internal cache. Use this after making server-side changes that affect timeline availability.
WP Admin → Motion.page → Settings → Clear Cache
Wipe on uninstall
Enable Wipe on uninstall in Global Settings → WordPress before removing the plugin if you want all Motion.page data permanently deleted. By default, your animations are preserved and can be restored by reinstalling the plugin.
Related
- Workspace Overview — Full tour of the builder interface
- Lenis Smooth Scroll — Configure smooth scroll settings
- Breakpoints — Set responsive breakpoint widths
- CDN & SDK Bundles — Publishing animations and SDK delivery options
- Left Panel — Complete Left Panel reference