Add entrance and scroll animations to widgets and page elements to make your website more interactive and memorable. Use animation to highlight important areas, such as a phone number or a contact button.
Control where each animation starts and ends on your screen by adjusting the Scroll settings.
- Apply animations sparingly to avoid distracting users.
- If you do not see your changes, check if animations are set at either the row or widget level.
Important:
Too many animations can disorient visitors. Only use animations to emphasize key content or calls to action.
Add animations
Follow the steps below to add an animation to a widget.
Step by step:
Right-click any row or widget to open its context menu.
If using flex mode, right-click the element and select Edit design.
Hover over Animation.
If in flex mode, the Design panel opens automatically. Click the Animation section.
- Select one of the following:
- Entrance: Choose an animation that plays when the widget loads.
- Scroll: Select an animation triggered as the user scrolls to the widget.
- Customize: Pick the animation trigger (Entrance or Scroll), then select the animation. Customize is unavailable in flex mode.
- For entrance animations, set the Duration, Delay, and Intensity.
- For scroll animations, set In or Out, Direction, and Intensity.
To reset the animation, click Default settings.
To pause scroll animations while editing, click Pause animation in the side panel. Animations remain active in preview and on your live site.
Note:
Animations set for desktop and tablet are linked. Mobile animations are separate and must be configured individually.
Remove animations
To remove entrance animations:
- Right-click any row or widget to open its context menu.
- Hover over Animation
- Hover over Entrance or Scroll, and select None.