Mouse animation

Animates elements on mouse move.



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.


Attribute Type Default Description
data-lg-mouse-inertia Number 0.1 The inertia strength, which adds smoothness to the animation.

You can use a string like {0.25,0.75} to use a random value in this range.

The default value can be changed globally in JS luge.settings({mouse: {inertia: 0.1}}).