Grid Item Animation Options

Grid Items can be animated in multiple ways
This includes when the grid first loads, when new items are loaded, and hover animations

1. Animate the grid on first load

back to menu
  • Important Note:
    To disable the animations, select "none" in the dropdown menu.
This feature allows you to animate the grid on grid load or when its scrolled into view.
  1. Animation Type

    Select the "Animation Type" you'd like to use when the grid loads.

  2. Transition Speed

    Adjust the speed of the "Animation Transition".

  3. Transition Delay

    Apply delay to the "Animation Transition".

  4. Apply Delay to

    Apply delay to the grids by items, columns or rows

  5. Wait for viewport

    Only load the grid when its scrolled into view.

  6. Viewport buffer

    A percentage of the grid that needs to be inside/outside the viewport before grid loads.

2. Animate when new items are loaded

back to menu
This feature allows you to animate the grid when selecting filers or navigating the pagination.
  1. Animation Type

    Select the "Animation Type" you'd like to use when selecting filters or pagination

  2. Transition Speed

    Adjust the speed of the "Animation Transition".

  3. Transition Delay

    Apply delay to the "Animation Transition".

  4. Apply Delay to

    Apply delay to the grids by items, columns or rows

3. Hover Animations

back to menu
  • Important Note:
    To disable the animations, select "none" in the dropdown menu.
Animation applies to an individual grid item on hover
Animation applies to all non-hovered grid items

4. Grid Item Element Animation

back to menu
  • Important Note:
    To disable the animations, select "none" in the dropdown menu.

Edit the grid skin using the Item Skin Editor to apply/configure the grid item cover animation. The cover is the grid item's background color.

Select/configure the grid elements that you would like to animate such as icons, buttons, and text for the grid's selected skin and navigate to the "Animations" tab.