Documentation

Vanilla JavaScript

Install and configure the stable Motionwind v2 browser adapter.

Vanilla JavaScript

motionwind-vanilla scans DOM elements and wires them to Motion's JavaScript API. It supports HTML and SVG class attributes, including dynamically inserted elements when observation is enabled.

npm install motionwind-vanilla@2 motion motionwind-core@2

import { motionwind } from "motionwind-vanilla";
import config from "./motionwind.config";

const stop = motionwind({
  config,
  observe: true,
  respectReducedMotion: true,
});

// Call stop() when the page or island is disposed.

Options:

Option	Default	Purpose
`root`	`document`	Root node to scan.
`selector`	`[class*="animate-"]`	Candidate element selector.
`observe`	`false`	Wire elements added by an SPA, HTMX, or other DOM update.
`respectReducedMotion`	`true`	Render the resting state and skip interaction/scroll motion when requested.
`config`	`{}`	Tokens, presets, plugins, diagnostics, and adapter target.

The CDN bundle is self-contained and initializes automatically:

<script src="https://unpkg.com/motionwind-vanilla@2"></script>
<button
  class="animate-hover:scale-110 animate-tap:scale-90 animate-focus:scale-105"
>
  Test
</button>

Vanilla supports initial/enter, hover, tap, focus, in-view, continuous scroll, SVG paths, and reduced motion. Drag, layout projection, exit orchestration, and variant propagation require a component runtime and produce warnings.