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 Sync With Scroll

Learn more

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

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

animation-sync-with-scroll.gif

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 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 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 Start Position properties work together with the Hover On Box Animation.

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

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 Presets

You can use the Presets for the Run On Display, Hover, Box Hover, Image Background Hover, and Start Position Animation.

The following shows the Animation On Hover Presets.

animation-presets-one-line.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 Sync With Scroll [Learn more](page:485289) You can create the Animation Sync With Scroll to add interaction-synchronized scrolling to your websites without coding. You can set it for essential Elements like Text, Image, Shape, Box, etc., and apply effects to scrolling. **NOTE:** You need taller Blocks than usual to build the Animation Sync On Scroll. !animation-sync-with-scroll.gif! ## 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 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 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 Start Position properties work together with the Hover On Box Animation. !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! ## 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 Presets You can use the Presets for the Run On Display, Hover, Box Hover, Image Background Hover, and Start Position Animation. The following shows the Animation On Hover Presets. !animation-presets-one-line.gif! ## Related - [Animation Sync With Scroll](page:485289) - [Animation Run On Display](page:98657) - [Animation On Hover](page:197359) - [Animation On Box Hover](page:204909) - [Animation Start Position](page:204913) - [Animation On Image Background Hover](page:204919) - [Box Hover Slider Effect](page:191164) ##