Add Animations

Entrance animations let you animate Widgets and page Widgets when they are first loaded on your site. Motion and interactivity makes your site more memorable and can emphasize the sections you want visitors to focus on, like a phone number or a contact button.

Additionally, you can control where the animation starts and ends on the screen by using the Scroll settings.

When adding animations, keep in mind the following:

• Too many animations can disorient or distract users, so use them sparingly.
• When removing an animation, remember that animations can be applied to rows as well as Widgets, so the animation you are seeing might have been added somewhere unexpected.

To add animations:

1. Right click any row, column, or Widget to open its context menu. Or, if you are in flex mode, right click an element and select Edit design.
2. Hover over Animation. Or, if you are in flex mode, the Flex section Design panel should open, then click into the Animation section. Select one of the following:
   • Entrance. Select an entrance animation from the list that animates widgets when they are first loaded on the site.
   • Scroll. Select an animation from the list to animate widgets when the user scrolls to the widget.
   • Customize. Select the trigger for the animation (either Entrance or Scroll), and select an animation from the list. Customize is not an option when in flex mode.
     • For entrance animations, then select the Duration, Delay, and Intensity for the animation.
     • For scroll animations, then select In or Out, Direction, and Intensity.

To reset the animation, click Default Settings.

If you use a scroll animation, you can click Pause Animation in the side panel to pause all animations while you are in editing mode. The animations will still be active in preview mode and on the live site.

Remove Animations

To remove entrance animations:

1. Right-click any row or widget to open its context menu.
2. Hover over Animation, and then hover over Entrance or Scroll, and select None.