Articles on: Nav-Filter-Sort

Animation

Animations

Animating Grid Start, Filter/Pagination, and Hover Events

Setup your grid’s five major animation types


Table of Contents

  • Animations
  • Start Animation
  • Animation Type
  • Transition speed
  • Filter/Pagination Animation
  • Hover Animations

Animations

The Animations tab allows you to configure five types of animation in Essential Grid: start animations, filter & pagination animations, and hover animations:


Let’s see how to use its options.

Start Animation

Clicking on Start Animation does not trigger any visible action. Although several animation options are available under the Start Animation section, selecting or clicking the Start Animation control does not apply any animation effect or display any response in the gallery preview. The feature appears to be non-functional.


Animation type

Select one of the available animations from the Animation Type drop down list:



Transition Speed

Use the Transition Speed option to set how long, in milliseconds, that animation should take to play out:


Filter/Pagination Animation

Filter/Pagination Animation controls how gallery items animate when a filter is applied or when users navigate between pages in a paginated gallery. After opening the Filter/Pagination Animation settings, users can choose an animation type (such as Fade), adjust the transition speed and delay, and define whether the delay should be applied by items, columns, or rows. These settings determine how smoothly gallery items appear, disappear, or rearrange themselves during filtering and page transitions, creating a more engaging visual experience for visitors.






Hover Animations

Hover Animations allow you to control how gallery items behave when a visitor hovers over them. The feature provides two main settings: Grid Item Hover Animation, which affects the item being hovered over, and Grid Item Other Animation, which affects the remaining items in the grid. By combining these options, you can create interactive effects such as zooming in on the hovered item while other items zoom out. Depending on the selected animation type, additional customization options may become available, including zoom percentage, blur intensity, shift direction and distance, or rotation angle. These settings help create a more engaging and visually appealing gallery experience.


T

Updated on: 25/06/2026