Summary

  • Overview
  • Animation Run On Scroll
  • Animation Sync With Scroll
  • Animation On Hover
  • Animation On Box Hover
  • Animation On Image Background Hover
  • Animation Start Position
  • Box Hover Slider Effect
  • Preset Display

Overview

You can apply various Animation Effects to Elements and Containers to add interaction and attractiveness to your websites. Add Animation Properties by choosing the type from the list first. The selected Animation is shown as a Property Group.

animation-reworked.gif

You can use the following types of Animation Effects on your websites.

Animation Run On Display

You can trigger the Animation Run On Display when the web page loads or starts scrolling. You can also apply the Animation to the Elements and Containers when they appear on the screen.

Learn more about the Animation Run On Display

animation-effects.gif

Animation Sync With Scroll

You can create the Animation Sync With Scroll, adding interaction-synchronized scrolling to your websites without coding. You can set it for basic Elements like Text, Image, Shape, Box, etc., and apply effects on scrolling.

NOTE: You need taller Blocks than usual to build the Animation Sync On Scroll.

Learn more about the Animation Sync With Scroll

animation-sync-with-scroll.gif

Animation On Hover

Use Animation On Hover to add interaction to your web designs. You can apply Hover Effects to the Elements like Texts, Images, Icons, Shapes, etc., and Containers, including the Box Element, Grid, and Grid Repeater Items.

Learn more about the Animation On Hover

animation-on-hover.gif

Animation On Box Hover

The Animation On Box Hover is applied to the selected Element added to a Box, Grid Cell, or Grid Repeater Item.

Learn more about the Animation On Box Hover

animation-box-hover.gif

Animation On Image Background Hover

Learn more about the Animation On Image Background Hover

You can apply the Animation On Image Background Hover to the Box, Grid, Grid Repeater, and Image Gallery Elements. The Effect occurs when you hover a mouse over the Background.

animation-image-bg-hover.gif

Animation Start Position

Use the Animation Start Position to set the initial position of the Hover Animation for an Element in a Box. The Effect occurs when you hover a mouse over the Box Element.

NOTE: The Animation Start Position works with the enabled Hover On Box checkbox.

Learn more about the Animation Start Position

animation-start-position.gif

Box Hover Slider Effect

Learn more about the Box Hover Slider Effect

You can use the Box Hover Slider Effect on a Box or a Grid Cell, adding the hover interaction to your web design.

box-hover-slider-effect.gif

Preset Display

The display of the Presets for the Run on Display, Hover, Box Hover, Image Background Hover, and Start Position Animation Types is optimized. They are shown in one line in the Property Panel after the selection.

animation-presets-one-line.gif

See Also

## Summary - Overview - Animation Run On Scroll - Animation Sync With Scroll - Animation On Hover - Animation On Box Hover - Animation On Image Background Hover - Animation Start Position - Box Hover Slider Effect - Preset Display ## Overview You can apply various **Animation Effects** to Elements and Containers to add interaction and attractiveness to your websites. Add Animation Properties by choosing the type from the list first. The selected Animation is shown as a Property Group. !animation-reworked.gif! You can use the following types of Animation Effects on your websites. ## Animation Run On Display You can trigger the **Animation Run On Display** when the web page loads or starts scrolling. You can also apply the Animation to the Elements and Containers when they appear on the screen. [Learn more about the Animation Run On Display](page:98657) !animation-effects.gif! ## Animation Sync With Scroll You can create the **Animation Sync With Scroll**, adding interaction-synchronized scrolling to your websites without coding. You can set it for basic Elements like Text, Image, Shape, Box, etc., and apply effects on scrolling. **NOTE:** You need taller Blocks than usual to build the Animation Sync On Scroll. [Learn more about the Animation Sync With Scroll](page:485289) !animation-sync-with-scroll.gif! ## Animation On Hover Use **Animation On Hover** to add interaction to your web designs. You can apply Hover Effects to the Elements like Texts, Images, Icons, Shapes, etc., and Containers, including the Box Element, Grid, and Grid Repeater Items. [Learn more about the Animation On Hover](page:197359) !animation-on-hover.gif! ## Animation On Box Hover The **Animation On Box Hover** is applied to the selected Element added to a Box, Grid Cell, or Grid Repeater Item. [Learn more about the Animation On Box Hover](page:204909) !animation-box-hover.gif! ## Animation On Image Background Hover [Learn more about the Animation On Image Background Hover](page:204919) You can apply the **Animation On Image Background Hover** to the Box, Grid, Grid Repeater, and Image Gallery Elements. The Effect occurs when you hover a mouse over the Background. !animation-image-bg-hover.gif! ## Animation Start Position Use the **Animation Start Position** to set the initial position of the Hover Animation for an Element in a Box. The Effect occurs when you hover a mouse over the Box Element. **NOTE:** The Animation Start Position works with the enabled Hover On Box checkbox. [Learn more about the Animation Start Position](page:204913) !animation-start-position.gif! ## Box Hover Slider Effect [Learn more about the Box Hover Slider Effect](page:191164) You can use the **Box Hover Slider Effect** on a Box or a Grid Cell, adding the hover interaction to your web design. !box-hover-slider-effect.gif! ## Preset Display The display of the Presets for the Run on Display, Hover, Box Hover, Image Background Hover, and Start Position Animation Types is optimized. They are shown in one line in the Property Panel after the selection. !animation-presets-one-line.gif! ## See Also - [Animation Run On Display](page:98657) - [Animation Sync With Scroll](page:485289) - [Animation On Hover](page:197359) - [Animation On Box Hover](page:204909) - [Animation On Image Background Hover](page:204919) - [Animation Start Position](page:204913) - [Box Hover Slider Effect](page:191164) ##