Messenger Icon

Hover Trigger

With Hover Trigger, Animations belonging to the parent timeline start when the user hovers the elements

Timeline Control Setup

To begin, choose “Hover” Trigger in your Timeline Control Tab

Trigger element selector

Trigger element selector You either type directly your specific elements on Selector Box or use our Selector Detector to scan and pick elements from your Preview Page

You have the flexibility to select specific elements on your page that will trigger all the configurations within your parent timeline. This means that when users hover the selected elements, the corresponding functions within the timeline and animations will initiate.

Note: When you ignore this selection part, the selected element in your first animation will be applied by default.

litemove hover 2
For instance, the .button-arrowclass is selected to trigger. When users hover over this class, the arrow button inside this class starts animating.

Reverse on mouse leave

If enable this function, the element will reverse when users leave the selected trigger area

Restart on mouse leave

If enable this function, the element will restart when users leave the selected trigger area

litemove hover 6

Animation Control Setup

As in Page Load Trigger, you can apply any property for animations.
To begin, select the appropriate “Trigger element”, enter input elements, or use Selector Detector to choose specific elements on your page.

Hover trigger + Translate X property for an Icon Element

For instance, we apply the translate X property to animate an Icon element. (the arrow icon on the blue button)

litemove hover 4

The result of Hover demonstration

litemove hover
ON THIS PAGE
MORE

Back to top