Your first animation: Step-by-step guide

Creating animations with is easy and rewarding.
This step-by-step guide will walk you through creating your first animation.

Step 1: Launching

You can launch in two ways.

  1. From the left WordPress menu in your dashboard, which loads with the starting screen where you can see all saved animations.
  2. Depending on where you want to apply the animation, navigate to the corresponding page, post, or template and find the "" button at the top bar

Step 2: Creating a New Timeline

Upon launching, 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:

Page load

Page Exit




Mouse Movement

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 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!

100 %