Declarative Interactive Animations in Vanilla JavaScript – Kinesis.js

Kinesis.js is a JavaScript library that transforms static HTML elements into interactive components with physics-based animations.

It uses mouse movement, scroll position, and even audio data to create dynamic effects directly from your HTML.

Features:

• Multiple Interaction Types: Mouse movement, scroll position, and audio frequency data
• 3D Transformations: Built-in support for perspective, depth, and rotation effects
• Performance Optimized: Includes throttling and efficient event handling
• Path-Based Animation: Elements can follow custom SVG paths
• Distance-Based Effects: Transformations based on cursor proximity
• Audio Visualization: Real-time animation synchronized with audio frequency analysis
• Declarative Configuration: Uses HTML data attributes instead of complex JavaScript setup

How to use it:

1. Install kinesis and import it into your project.

# NPM
$ npm install @amineyarman/kinesis

import { initializeKinesis } from "@amineyarman/kinesis";

2. Initialize kinesis and you can then declare animations in your markup.

initializeKinesis();

3. Creates container elements that apply transformations to child elements based on mouse or scroll interactions.

Container Attributes:

• data-kinesistransformer – Marks the container (required)
• data-ks-interaction – mouse or scroll (default: mouse)
• data-ks-duration – Transition duration in milliseconds (default: 1000)
• data-ks-perspective – 3D perspective value in pixels (default: 1000)
• data-ks-scroll-element – CSS selector for scroll container (default: window)

Element Attributes:

• data-kinesistransformer-element – Marks the animated element (required)
• data-ks-strength – Animation intensity (default: 10)
• data-ks-transform – Transform type: translate, rotate, scale, tilt, tilt_inv (default: translate)
• data-ks-transformaxis – Comma-separated axes: X, Y, Z (default: X, Y)
• data-ks-interactionaxis – Restrict to single axis: X or Y (optional)

<div data-kinesistransformer data-ks-duration="1000" data-ks-perspective="800">
  <div data-kinesistransformer-element data-ks-strength="20"></div>
</div>

4. Applies 3D depth effects based on mouse position:

• data-ks-sensitivity – Rotation sensitivity (default: 40)
• data-ks-inverted – Reverse rotation direction (default: false)
• data-ks-throttle – Event throttling in milliseconds (default: 100)

<div data-kinesisdepth data-ks-perspective="1200" data-ks-sensitivity="15">
  <div data-kinesisdepth-element data-ks-depth="5"></div>
</div>

5. Synchronizes animations with audio frequency data:

Container Attributes:

• data-ks-audio – Audio file URL (required)
• data-ks-playaudio – Auto-play audio (default: false)

Element Attributes:

• data-ks-audioindex – Frequency bin index (default: 50)

<div data-kinesisaudio data-ks-audio="audiofile.mp3" data-ks-playaudio="true">
  <div data-kinesisaudio-element data-ks-strength="30" data-ks-audioindex="50"></div>
</div>

6. Move elements along an SVG path. You need to define the path data directly in the data-ks-path attribute:

<div data-kinesispath data-ks-path="M10,10 C20,20 40,20 50,10">
  <div data-kinesispath-element data-ks-offset="0"></div>
</div>

7. Make your element react to scroll progress.

• data-ks-strength – Animation intensity
• data-ks-transform – Transform type: translate, rotate, scale, tilt, tilt_inv

<div data-kinesisscroll-item data-ks-transform="scale" data-ks-strength="15"></div>

8. Make your element react to mouse proximity.

• data-ks-strength – Animation intensity
• data-ks-startdistance – Define the distance in pixels from the mouse pointer at which the animation begins

<div data-kinesisdistance-item data-ks-strength="15" data-ks-startdistance="200"></div>