Summary

  • Overview
  • Enable Animation On Box Hover
  • Test Animation On Hover
  • Combination With Animation on Hover
  • Animation Presets
  • Animation For Grid Repeater
  • Animation Properties

Overview

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

Enable Animation On Box Hover

You can do the following to trigger the Animation On Box for the selected Element.

  1. Add an Element to a Box.
  2. Select the added Element.
  3. Go to the Property Panel to the right.
  4. Scroll down to the Animation section.
  5. Click on the Hover On Box link.
  6. Check the Hover On Box checkbox.

animation-box-hover-enable.png

Test Animation On Hover

You can test the Animation Effects On Box Hover by clicking on the Play button near the Hover On Box checkbox in the Property Panel.

animation-box-hover-play.png

Combination With Animation on Hover

You can simultaneously apply the Animation on Box Hover and the Animation On Hover for the selected Element in a Box.

animation-hover-box-hover.gif

Animation Presets

You can use the Presets to add the Animation Effects On Box Hover quickly, including Shadow, Border, Scale, Shift, Shift Up, and Color.

animation-box-hover-presets.png

Animation For Grid Repeater

You can use the Animation Effects On Box Hover for Elements added to the Grid Repeater Items.

animation-box-hover-grid-repeater.gif

Animation Properties

Edit the properties of the Animation On Box Hover depending on the Element added to a Box, including the Duration, Color, Background, Border, Shadow, Shape, Radius, Transparency, Scale, Rotate, and Move.

animation-box-hover-properties.png

Animation Duration

Specify the transition time from the default to the Hover state for the selected Element in a Box by changing the Duration property in the Property Panel. The duration can be from 0 to 10 seconds.

animation-box-hover-duration.gif

## Summary - Overview - Enable Animation On Box Hover - Test Animation On Hover - Combination With Animation on Hover - Animation Presets - Animation For Grid Repeater - Animation Properties ## Overview 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! ## Enable Animation On Box Hover You can do the following to trigger the Animation On Box for the selected Element. 1. Add an Element to a **Box**. 2. Select the added Element. 3. Go to the **Property Panel** to the right. 4. Scroll down to the **Animation** section. 5. Click on the **Hover On Box** link. 6. Check the **Hover On Box** checkbox. ## !animation-box-hover-enable.png! ## Test Animation On Hover You can test the Animation Effects On Box Hover by clicking on the Play button near the Hover On Box checkbox in the Property Panel. !animation-box-hover-play.png! ## Combination With Animation on Hover You can simultaneously apply the Animation on Box Hover and the [Animation On Hover](page:197359) for the selected Element in a Box. !animation-hover-box-hover.gif! ## Animation Presets You can use the Presets to add the Animation Effects On Box Hover quickly, including **Shadow, Border, Scale, Shift, Shift Up**, and **Color**. !animation-box-hover-presets.png! ## Animation For Grid Repeater You can use the Animation Effects On Box Hover for Elements added to the Grid Repeater Items. !animation-box-hover-grid-repeater.gif! ## Animation Properties Edit the properties of the Animation On Box Hover depending on the Element added to a Box, including the **Duration, Color, Background, Border, Shadow, Shape, Radius, Transparency, Scale, Rotate**, and **Move**. !animation-box-hover-properties.png! ### Animation Duration Specify the transition time from the default to the Hover state for the selected Element in a Box by changing the Duration property in the Property Panel. The duration can be from 0 to 10 seconds. !animation-box-hover-duration.gif! ##