Mouse animation

Import MouseAnimation from @waaark/luge, register it with luge.addPlugin('mouse', MouseAnimation), then call luge.init(). See Getting started for a complete setup.

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(--mouse-progress-x) * 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

Attribute	Type	Default	Description
`data-lg-mouse-inertia`	Number or range string	0.1	The interpolation factor. Smaller positive values follow the mouse more slowly; `0` bypasses smoothing. You can use `{0.25,0.75}` for a random value in that range. Set the default with `luge.settings({mouse: {inertia: 0.1}})`.

The CSS variables contain unitless numbers: --mouse-x and --mouse-y represent pixel distances, so use calc(var(--mouse-x) * 1px) when a CSS length is needed. Numeric inertia is clamped to 0–0.99. Unlike ScrollAnimation, MouseAnimation multiplies the remaining distance by inertia itself, not by 1 - inertia.

Try it

Open the full demo