Your first animation: Step-by-step guide
This step-by-step guide will walk you through creating your first animation.
Step 1: Launching Motion.page
You can launch Motion.page in two ways.
- From the left WordPress menu in your dashboard, which loads Motion.page with the starting screen where you can see all saved animations.
- Depending on where you want to apply the animation, navigate to the corresponding page, post, or template and find the "Motion.page" button at the top bar
Step 2: Creating a New Timeline
Upon launching Motion.page, you are automatically creating a new timeline for your animation, which controls the sequence of your animation nodes.
Step 3: Name the Timeline and Choose the Page
Name your timeline and choose the specific page where the animation should load or set it as global to load on all pages.
Step 4: Setting Up The Trigger
By default, the trigger is set to Page Load. However, you can adjust it based on when you want the timeline (the animation sequence) to occur.
Triggers can be the following:
Each timeline has a single trigger associated with it.
Step 5: Adding Animation Nodes
An animation node encapsulates what you want to animate and how. You can create a new animation node by clicking the + button within the Timeline panel. Each animation node can have a different selector and properties.
Step 6: Define Animation Properties
Select your desired animation properties for the node. Options are expansive, including but not limited to Position, Scale, Rotation, and Opacity.
Step 7: Preview Your Animation
Ensure your animation looks and functions as expected by checking the Preview Pane within the builder.
Step 8: Save Your Work
Attention to detail is the key to great animations, so make sure to save your progress. Click on the save icon, usually found in the top-right corner.
Remember, this guide is just your first step into the world of animation with Motion.page. As you get more comfortable, more advanced features, triggers, and properties are waiting to be explored and mastered.
Start animating and bring your website to life!
