Add Animations

Entrance animations allow you to animate widgets and page widgets when they load on your site for the first time. Interactivity and motion make your site more memorable and can highlight sections you want visitors to focus on, such as a phone number or a contact button.

You can also use the Scroll settings to control where the animation begins and ends on the screen.

Keep the following in mind when adding animations:

• Users can become disoriented or distracted if there are too many animations, so use them sparingly.
• When removing an animation, keep in mind that animations can be applied to both rows and widgets, so the animation you're seeing could have been added in an unexpected place.

To add animations:

1. To open the context menu for any row or widget, right-click on it. Or click an element and select Edit design.
2. Hover over Animation and choose one of the options:
3. Entrance. Choose an entrance animation from the list to animate widgets when they are loaded for the first time on the site.
4. Scroll. To animate widgets when the user scrolls to the widget, choose an animation from the list.
5. Customise. Choose an animation from the list and the trigger for the animation (Entrance or Scroll).
6. Select the Duration, Delay, and Intensity for the animation for entrance animations.
7. Select In or Out, Direction, and Intensity for scroll animations.

Click Default Settings to clear the animation.

If you use a scroll animation, you can pause all animations while in editing mode by clicking Pause Animation in the side panel. The animations will remain active in preview mode as well as on the live site.

On mobile and tablet devices, animations can be accessed via the context menu. The effects are device-specific, and different animations can be defined for each device. If you have previously defined an animation on the desktop, the animation will not be automatically inherited by tablet and mobile devices. You must choose an effect from the device's context menu.

Remove Animations

To disable entrance animations:

1. To open the context menu for any row or widget, right-click on it.
2. Hover over Animation, then Entrance or Scroll, and finally None