Interface Overview

Motion.page Builder

The Motion.page builder is where you create, edit, and manage your animations. Elements within the builder include:

• Animation Setup: At the top, you have the option to name your animation. You can also specify where the animation should load – on a specific page, on all pages (global), or with advanced targeting, you can choose multiple pages, templates, or URLs to output the timeline code.
• Trigger Options: Set when and how your animation activates, ranging from page loads, clicks, scrolls, to custom settings.
• Animation Properties: Lists all the properties you can animate, from simple ones like Opacity and Dimensions to advanced ones including DrawSVG, Lottie, and Image Sequence.
• Live Preview Pane: Enable users to preview their animations and adjust as necessary before saving them.
• Timeline Editor: You can see the progression of your animations, add new ones, adjust timing and positions, and re-order them as needed.
• Library: Here, you can access all timelines you've created and saved. They are categorized by the page where they were created. Animations can be edited by clicking on them and additional options are accessible via right-click. Each animation also has control options on the right side to set them as hidden or global.

The interface also provides options for Saving updates, Undo/Redo changes, as well as accessing the Global Settings and Help resources.

Navigation through the Builder

Navigating through the Motion.page interface is designed for ease. You can access all required tools from the centralized animation editing panel. Changes made are reflected in real-time through the Preview Pane, and save options ensure your progress is preserved in every step.