Creating animations in motion.page is a straightforward and fun process, however, the tool is very powerful and can offer much more than a simple animation. A basic understanding of CSS is recommended, however, once you get a grasp of it, you will see how easy and fast it is.
In this tutorial, we will explain the UI, the process behind creating an animation, and the different options that motion.page has to offer.
Meet the motion.page builder
When you open the builder, you already have everything set up for the new timeline, so you can start right away.
Let's build the first simple Fade-in animation.
Name your animation or keep the generated name.
Keep the page load trigger, which is set as the default
Continue to select the element for your animation, click the selector scanner and click on any element to find its selectors. It's recommended to use a unique selector as ID, or a class that is not used on other elements.
In the "From" tab open Opacity and change it to 0.
Now your first animation is ready. Click the play button
You just created a simple Fade-in animation in 5 clicks. You can keep adding various properties and experiment with the animation.
Basic settings
At top of the builder, you can set some basics to your newly created timeline.
In the first row, you can rename the timeline as it appears in the library, duplicate or create a new one.
In the second row, you set a page where you want to have your animation. If you want it to load on all pages instead, click the Global icon on the right side.
Triggers
The trigger you select in this section will be applied to this entire timeline.
You can choose from:
Page Events
Page Load
Page Exit
Scroll Trigger
Interactions
Hover
Click
Each trigger may have its own sub-settings. Especially the ScrollTrigger which we will cover in more detail in the next tutorial.
Animation
Here comes the fun!
This pane controls properties to animate for the single animation in your timeline.
Start with the Animation Selector - you either know which selector you want to animate, so you can write it into the input (and confirm with entering), or use our selector scanner tool to pick the right selector directly from your page (activate it by clicking the icon at the right side of the input).
You can add one or multiple selectors into a single animation.
Decide if you want to animate From or To (or both) and start adding properties that are going to be animated.
When to use From, To, or both?
Use From to change only the starting value, and it will automatically animate to its default state.
This means that if your animation contains opacity 0 in the "From" tab, it will animate from opacity 0 to 1, and you don't have to add a value of 1 into the "To" tab.
Use the "To" if you want the animation to start from its default style to your selected properties.
Use both if you need to set specific values on both sides.
Enabled Breakpoints
You can run the animation only on a specific range of breakpoints. This applies to an entire timeline.
The timeline & player
Since the start, you have one animation node in your timeline, but you can add as many as you want. Click the plus icon at bottom of the timeline to add another animation.
Switch between animations easily by clicking them, so it refreshes the Animation panel with your properties. Right-click the animation to show the context menu where you can delete or duplicate the animation.
LIVE MODE - In ScrollTrigger and Interactions, you have the option to switch on live mode.
Live mode runs the preview directly by interacting with the iframe (scrolling, clicking, hovering), while player mode controls the animation using our play / pause / rewind / loop controls.
Other lessons:
Lesson 1: Getting started with motion.page