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.
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.
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 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 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 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 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.
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]()
