Animation

​
Builders can add CSS animations to any object. The most used forms of animations are to let an object move from side to side, up and down or let it rotate.
To add animation to an object, go to Object menu / Interactions / Effects / Animation
There’s a few options in the animation screen like the duration of the animation, and the ability to add keyframes. It helps if builders have some experience with using CSS animations.
Here’s some basic commands you can use to experiment with animation:
translateX(…px) Lets objects move on a horizontal axis.
translateY(…px) Lets objects move on a vertical axis.
rotate(…deg) Rotates the object around a point of origin (customizable)
Configuring animation
In the screen below you can see a basic example of how to add a side-to-side animation. This is how it works:
Duration This is the total duration of the animation. Lengthening it will result in the object moving slower. Shortening, will make it move faster.
Keyframes Imagine keyframes as a timeline. At a certain point in time, you want the object to move 50px further than it’s starting position, at another point in time, you want it to move back to it’s base position. In this example case, the animation starts at 0px and takes 50% of the duration to move 50px to the right, then it uses the other 50% of the time to move back to 0px. Which results in a right to left movement.
Easing This is a setting to make animations look smoother. Try them out to notice the difference.
Configure an animation
This is how the configuration will look.
Using origin transform
In this example, we’ll animate a tree to show how origin transform works. If builders use a rotate animation, they can alter the point of origin. This is point is where the rotation will revolve around. In the example, the tree revolves around the center of the image. We can set the origin at the base of the tree, to make the animation feel natural. Here’s how:
How to use origin transform
Last modified 6mo ago