Animated movie
The blocks move differently depending on the scroll position and time, giving the effect of emphasizing the content.
Add animation
Click the Animation menu on the right side of the editing screen.
Hover your cursor over the desired block, click Add Animation , and then select the desired animation.
Blocks with animations applied appear with a green background, as shown in the image. If you turn the preview mode option on the right side of the screen off and then on again, you can preview the animation without switching to view mode.
If you want to apply the same animation to multiple blocks at once, try using the Copy Style feature.
Copy Style: Cmd(Ctrl) + Option(Alt) + C
Paste Style: Cmd(Ctrl) + Option(Alt) + V
Types of animation
There are three main types of triggers (actions to start animations), and each trigger can have different animations applied. Let's look at the examples under each name to see what effect they have.
Entrance
The animation starts as soon as the block appears on the screen and runs for a preset duration, regardless of the scroll position.
Slide
Button Settings: Delay 0.3 | Duration 0.5 | Distance 50 | Direction Up | Animation CubicBezier
Image Settings: Delay 0.6 | Duration 0.5 | Distance 50 | Direction Up | Animation CubicBezier
Image Settings: Delay 0.6 | Duration 0.5 | Distance 50 | Direction Up | Animation CubicBezier
Fade in
Button settings: Delay 0 | Duration 1 | CubicBezier
Image settings: Delay 0.3 | Duration 1 | CubicBezier
Image settings: Delay 0.3 | Duration 1 | CubicBezier
Scale in
Button Settings: Delay 0 | Duration 0.8 | Animation CubicBezier
Image Settings: Delay 0 | Duration 0.8 | Animation CubicBezier
Image Settings: Delay 0 | Duration 0.8 | Animation CubicBezier
Scroll
As you scroll, the animation runs continuously along the scroll position, from when the block becomes visible on the screen until it disappears.
Parallax
Button Settings: Distance 150 | Direction Left | Overflow Visible
Image Settings: Distance 150 | Direction Right | Overflow Visible
Image Settings: Distance 150 | Direction Right | Overflow Visible
Fade in
Button setting: None
Image settings: None
Image settings: None
Fade out
Button setting: None
Image settings: None
Image settings: None
Scale in
Button settings: Direction Center
Image settings: Direction Bottom
Image settings: Direction Bottom
Infinite
The animation starts as soon as you enter the site and continues regardless of your scroll position.
Breathe
Button Settings: Distance 10 | Duration 2 | Direction Center | Overflow Visible
Image Settings: Distance 50 | Duration 4 | Direction Width | Overflow Visible
Image Settings: Distance 50 | Duration 4 | Direction Width | Overflow Visible
Slide
Multiple images slide horizontally. Applicable only to the Image Slider block.
Setting value: Speed 2 | Pause on hover On
