Mouse animation

Animates elements on mouse move.

Usage

<div 
  class="my-element"
  data-lg-mouse>
</div>

Mouse animated elements will get CSS variables:

• --mouse-x/ --mouse-y: contains the mouse position relative to the element top left corner position in px.
• --mouse-progress-x/ --mouse-progress-y: contains the mouse progress (from 0 to 1) inside the the element bouding box.
• --diff-x / --diff-y: when using inertia (see attributes), contains the difference between the expected position and the delayed one.
• --abs-diff-x / --abs-diff-y :  contains the absolute value of the --diff-x / --diff-y variables.

You can then use these variables to create your own CSS animations. For instance, to make an element rotate based on mouse movement:

.my-element {
  transform: rotateY( calc( var(--progress) * 180deg ) );
}

Mouse animation also brings new properties to the global window object:

• window.mouseSpeed: contains the mouse speed ;
• window.mouseAngle: contains the mouse angle in degrees ;
• window.mouseDirection: contains the mouse direction as a string (up, right, down, left) ;

Quick demo on this pen.

Attributes