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

Learn more

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.

animation-effects.gif

Animation Sync With Scroll

Learn more

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.

animation-sync-with-scroll.gif

Animation On Hover

Learn more

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.

animation-on-hover.gif

Animation On Box Hover

Learn more

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

animation-box-hover.gif

Animation On Image Background Hover

Learn more

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

Learn more

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.

animation-start-position.gif

Box Hover Slider Effect

Learn more

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

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 [Learn more](page:98657) 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. !animation-effects.gif! ## Animation Sync With Scroll [Learn more](page:485289) 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. !animation-sync-with-scroll.gif! ## Animation On Hover [Learn more](page:197359) 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. !animation-on-hover.gif! ## Animation On Box Hover [Learn more](page:204909) The Animation On Box Hover is applied to the selected Element added to a Box, Grid Cell, or Grid Repeater Item. !animation-box-hover.gif! ## Animation On Image Background Hover [Learn more](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 [Learn more](page:204913) 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. !animation-start-position.gif! ## Box Hover Slider Effect [Learn more](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! ## Related - [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) ##