Steps of animation
By default, any animation is made of at least two steps. The more steps you add, the more complex the animation gets.
Click on a step to configure it. To duplicate, delete or copy/paste the settings of any step, open its context menu by clicking on the ellipsis icon.
The Initial state of a step is the position of an animated element where it starts moving from. You can add any number of steps you see fit.
Move
This option moves the animated element along the X and Y axes during the current step.
Scale
This option lets you set the size of an element as a percentage. By default, the initial size of the element is 100%: use bigger values to enlarge the element and smaller values to reduce it.
You can also change the width or height values separately.
If you want the height and width of the element to change concurrently, click the icon on the right to bind both settings together.
Rotate
This setting allows you to rotate an element by a relevant number of degrees.
If you set a negative value, the element rotates counterclockwise. If you enter a value bigger than 360 degrees, the element makes more than one complete rotation.
90 DEG — rotates an element by 90 degrees clockwise-90 DEG — rotates an element by 90 degrees counterclockwise Opacity
This option sets the opacity value of an element at the current step.
Opacity is measured as a percentage. When the opacity value is 0%, the element is fully visible. When the opacity value is set to 100%, the element is invisible.
Skew
This option lets you skew an element at the current step.
By default, this option is set to 0 and its menu is folded on the settings panel. To open the skew settings menu, click on the + icon.
The option values are set in degrees, separately for X and Y axes. You can enter both positive and negative values.
Use this setting to create engaging effects.
Mask
A mask is an invisible shape that lets you hide or display some part of an element. This option comes in handy to make an element fade in smoothly on the page.
By default, the option menu is folded on the panel. To set up the mask, click on the + icon .
The mask values are set as a percentage.
Transformation point
This option sets the point relative to which an element will rotate, skew or shift.
There are nine values to choose from. The video below shows some of these values to demonstrate the different effects they produce.
Disable pointer events
This option makes the element unclickable while the animation of the step is played.
Duration
This setting specifies the time that the execution of the current step will take up.
The setting values range from 0.01 to 5 seconds in increments of 0.1 second.
If you select to play animation On scroll, this option becomes available only for Step-by-step playing.
Delay before start
This option specifies the time that passes before the animation of the current step starts playing.
The setting values range from 0.01 to 5 seconds in increments of 0.1 second.
Number of replays
By default, any animation you create plays only once. You can also set up several replays or loop the steps.
The example below shows some variants of setting up the replay.
Animation direction
The animation can be played in two directions:
Normal
The animation is played from the initial to the final state.
The animation is played from the initial to the final state.
Bounce
After playing the animation, the animated element returns to the initial state as the animation plays in reverse order.
After playing the animation, the animated element returns to the initial state as the animation plays in reverse order.
Easing
This option specifies the change of animation speed that can speed up or slow down during the current step.
You can set up the values of two points on the graph yourself.
There are also 12 presets to choose from.
Copied
EaseIn
cubic-bezier(0.42, 0, 1, 1)
Click to copy
Click to copy
Copied
EaseOut
cubic-bezier(0, 0, 0.58, 1)
Click to copy
Copied
EaseInOut
cubic-bezier(0.42, 0, 0.58, 1)