Animated movie
The blocks move in various ways depending on the scroll position and time, providing an effect that emphasizes the content.
Add animation
In the Edit screen, click the handle ( ⋮⋮ ) > Animation of the block to which you want to apply the animation . Click the + at the top right of the Animation window to select the desired method from Enter, Hover, Press, Repeat, or Scroll.
After selecting the desired effect, adjust the settings.
To apply a different type of animation multiple times, click the + at the top right of the animation window again.
If you want to apply the same animation to multiple blocks at once, try using the style copy function.
Copy Style: Cmd(Ctrl) + Option(Alt) + C
Paste Style: Cmd(Ctrl) + Option(Alt) + V
Types of animation
It is broadly divided into five categories based on the trigger (the action required to start the animation).
Position
The animation starts as soon as the block is displayed on the screen and runs only for a preset duration, regardless of the scroll position.
Slide
Fade in
Scale in
Rotate
Wave (Text Only)
Highlight text with animation effects.
Type in (Text only)
Highlight text with animation effects.
Blur in (Text only)
Highlight text with animation effects.
Scramble (Text Only)
Highlight text with animation effects.
Split text (text only)
Highlight text with animation effects.
Stagger (Background blocks and sections only)
Hover
The animation runs while the mouse cursor is over the block, and returns to its original state when the cursor moves away.
Scale
Change color
Hover your mouse cursor over this box.
Text reveal
Hover your mouse cursor over this text.
Text curtain
Hover your mouse cursor over this text.
Pressure
The animation plays when you click (touch) the block, and returns to its original state when you release the cursor (hand).
Scale
Press and hold this gray box.
Change color
Press and hold this gray box.
Text reveal
Press and hold this text.
Text curtain
Press and hold this text.
Repeat
The animation starts as soon as you access the site and continues to run regardless of the scroll position.
Breathe
Rotate
Heartbeat
Slide (Image Slider Only)
Scroll
While scrolling down, the animation runs continuously along the scroll position from when the block starts to appear on the screen until it is no longer visible.
Fade in
Fade out
Parallax
Scale in
Rotate