You can animate a bunch of properties with motion.page and there will be much more added in future updates.
If you have any specific property in mind that you are missing in the builder right now, please share your vote in the community requests channel.
Let's take a look at our current properties you can animate, and combine together.
Opacity
The classic Fade in / Fade out animation can be easily achieved by animating the opacity. By adding 0 opacity to the "From" pane, you will get a nice Fade in transition. In a different scenario, you can add 0 opacity to the "To" pane and create a Fade out effect.
Translate
By animating a Translate property, you can animate an element by moving it on a horizontal or vertical axis.
The default value is %. Change the unit by clicking the (%).
If you want your element to move up by 50%, add to the "From" Y 50%. Combine if with opacity 0 for an even more sleek effect.
Scale
You can animate the size of an element by using the scale property. The default size is 1, and the minimum is 0, so by using the "From" Scale 2, it will animate from double it's size to its default size.
By clicking the modifier icon next to the close icon, you can control a separate axis of the Scale, so you can either animate ScaleY or ScaleX or both.
Rotation
Rotate an element fully by a specific amount of degrees, or click the modifier icon to control the axis separately using the range slider.
Skew
You can adjust sheering along the X and Y axis using the Skew transform property. You can use SkewX or SkewY or both together.
Dimensions
Animate the height and/or width of an element by using dimensions value.
You can use width, height or both at the same time. The default unit is %, click the unit to change between all kinds of other units (px, em, rem, vh, vw, vmin, vmax).
Note: Usually it's recommended to use Scale Y or Scale X for changing the size of an element, as animating the width and height affects the layout as well.
Background position
You can animate a background position to create a background parallax effect in combination with a ScrollTrigger and Lock to the scrollbar.
Background position is a standard CSS property and may require adding both X and Y to work properly.
You may also want to make the size of the background bigger than its container, to make it space for moving.
Background, Text & Border color
Set the color of an element. You can enter a color manually or use our color picker and choose any color you like.
Filter
Create advanced animations and effects by adding CSS filters.
At the moment, there are these filters available to animate:
Blur
Brightness
Contrast
Grayscale
Hue rotate
Invert
Saturate
Sepia
Note: Be careful with using an excessive number of filters, as they may affect performance on slower devices.
Repeat
By adding a repeat into the mix, you can create a looping animation, repeat only on a specific number of times, and add a delay in between each repeat.
You can also enable the Yoyo effect, which basically plays the animation forward, reverses itself, and then again forward. When Yoyo is disabled animation is repeating itself always the beginning.
Note: Add -1 into the number of repeats for the infinite loop
Stagger
Animate multiple elements one by one, by adding a delay / offset in between each item.
You can use a class that is distributed on all items you want to animate or add multiple selectors.
In Each field, add your offset in seconds.
In the dropdown, you can also select whether you want to animate your elements from Start, End, Edges, or Random. The start order is based on items' position in DOM.
Transform origin
Transform origin allows you to control the starting position of your Transform properties (Translate, Scale, Rotation).
Eg. By setting transform-origin to 0% and 0% (top left corner), and using a rotation, your element will rotate around the top left corner instead of the center.
Custom
Add any CSS or GSAP animatable property here. Include the property name to the left field, and the value to the right field.
You can add another row by clicking the + icon at the top, and you can remove the property by right-clicking the input field.
Here's the list of all animatable properties:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Ease
Make your animations more interesting by using a different Ease style.
Other lessons:
Lesson 1: Getting started with motion.page
Lesson 2: How to use motion.page to create your first animation