Animation Library

Save, organize, enable/disable, and manage your animation library.

The Animation Library is your central list of every saved timeline in the current site or project. Open it by clicking the Library tab at the top of the Left Panel.

Animation Library panel

Panel overview

The Library panel has three parts:

Filter bar — A searchable dropdown at the top for narrowing the list by trigger type or targeting rules.
Page groups — Timelines are grouped by the page they are assigned to. Each group has a collapsible heading showing the page name. Click the heading to expand or collapse it.
Footer — Import (drag-and-drop) and Export All controls.

Each animation row in a group shows the timeline name, trigger type badge, and action icons for enabling/disabling and toggling global load.

Enable and disable animations

Every animation can be toggled on or off without deleting it. The enable/disable button appears on each row.

Enable — activates the timeline so it runs on the page.
Disable — deactivates the timeline; it remains saved but no animation code is executed on the frontend.

This is useful for testing, staging animations before a launch, or turning off seasonal effects without losing the configuration.

Global vs. page-specific

Timelines are assigned to a specific page by default. The Global icon on each row controls whether the timeline loads everywhere:

State	What it does
Load timeline globally	The timeline will load on every page of the site, regardless of which page it was created on.
Unload timeline globally	Reverts to page-specific loading. The timeline only loads on its assigned page.

The same toggle is available in the Builder tab under the timeline name — the Library panel reflects that setting.

Right-click any animation row to open the context menu.

Action	Description
Duplicate	Creates a copy of the timeline on the same page. Opens in the Builder tab for immediate editing.
Delete	First click shows a confirmation prompt (“Are you sure?”). Click again to permanently remove the timeline.
Export	Downloads the selected timeline as a `.json` file for backup or sharing.
Copy UID	Copies the timeline’s unique identifier to the clipboard (useful for SDK or custom code integration).
Copy DB ID	Copies the internal database ID to the clipboard.

Caution: Deletion is permanent. Use Disable if you want to keep the animation but stop it from running.

Multi-select

Click and drag across animation rows to select multiple timelines at once. Hold Shift to toggle individual items in or out of the selection.

With multiple timelines selected, the context menu offers:

Delete Multiple — removes all selected timelines after confirmation.
Export Multiple — downloads all selected timelines in a single file.

Filters

The filter bar at the top of the Library panel is a searchable multi-select dropdown. Use it to narrow the list when you have many animations.

You can filter by:

Trigger type — Page Events, ScrollTrigger, Interactions (Click, Hover), Mouse Movement, Observer, and more.
Page Event subtype — On JS Load, On Page Load.
Interaction subtype — Click, Hover.
Advanced Targeting — Filter by post types or URL RegEx patterns defined in each timeline’s Advanced Targeting settings.

Select multiple filters to combine them. Clear all filters to return to the full list.

Import

To import a previously exported timeline:

Drag and drop the .json export file anywhere onto the Library panel. The footer displays the prompt: “Drop the animation file to import.”

The imported timeline is added to the library and immediately available for editing.

Export

You have three export options:

Option	How to access	What it exports
Single export	Right-click → Export	One timeline as a `.json` file
Multi export	Select multiple → Right-click → Export Multiple	All selected timelines in one file
Export All	Footer button	Every timeline in the library

Use exports to back up animations, move them between sites, or share them with other Motion.page users.

Refresh Library

If you have made changes outside the builder (for example, direct database edits or syncing from another environment), click Refresh Library in the Left Panel footer to re-fetch all timelines.

Workspace Overview — Tour of all four builder regions, including the Left Panel tab switcher
Left Panel — Full reference for the Builder tab and its controls
Animation Presets — Apply ready-made animations to get started quickly