Log In
Get Started
My Account

Steps of animation

Move
Scale
Rotate
Opacity
Skew
Mask
Transformation point
Disable pointer events
Duration
Delay before start
Number of replays
Animation direction
Easing
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.
Bounce
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)

Product

Resources

Company

Contacts

info@flexbe.com

© 2012–2023 Flexbe Inc.
Loading...