Entrance Animations and Scroll Animations

You can use this feature to animate many widgets, such as Titles, Text, Image and much more. This can be a great feature for important content, allowing you to draw attention to certain areas on your site (e.g. CTA’s).

Note: sometimes less is more; adding too many animations may be distracting.

To add an animation, right click on any row or widget to open the menu. Select “Animation” and click on the desired trigger.

Alternatively, you may open the options menu for a row or widget, then click on the Design Tab. Select the Animation tab to open Animation options.

Begin by selecting a trigger: Entrance or Scroll. Entrance animations are triggered when the site loads; Scroll animations are triggered when the animated area enters the viewport (when visitors see that part of the screen).

After selecting a trigger, select an animation style. Different triggers and styles have different customization options.

Several customization options are available (based on trigger and style selections):

• Duration: How long an animation lasts
• Viewport top / bottom: Where an animation begins and ends 
• Intensity: The power of an animation
• Delay: When an animation starts
• In/Out: The direction the animation moves in from (or out of the screen)

To remove the entrance animation, right click on the row or widget, select “Animation” and click on “None.”

Note: as animations can be added to both rows and widgets, make sure you are selecting the correct element.

If animations become distracting while you're working in the editor, you may pause animations by using the Pause Animations button on the bottom left side panel. This will only pause the animation within the builder, and will not affect the live site or preview site.