motion-helpers-compat weekly downloads statistics

motion-helpers-compat

A configurable Animate.css integration for Tailwind CSS 3. Same behavior as animatecss-tailwind-bridge, published under this package name for npm.

It reads the installed Animate.css catalog at build time, emits only the animations you select, and namespaces generated keyframes to prevent collisions.

Global duration, delay, and iterationCount values are passed to @jasperquinn/postcss-motion-helpers unchanged, which generates the corresponding Tailwind base custom properties.

Installation

npm install motion-helpers-compat animate.css

Basic usage

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}'],
  plugins: [
    require('motion-helpers-compat')({
      animations: ['bounce', 'fadeIn', 'fadeOut', 'slideInUp']
    })
  ]
};

Apply the base class together with an animation class:

<div class="keyframe keyframe-fade-in">Content</div>

Animation names are converted to kebab case in generated class names. For example, fadeInDownBig becomes keyframe-fade-in-down-big.

Configuration

require('motion-helpers-compat')({
  prefix: 'motion',
  animations: ['bounce', 'fadeIn'],
  exclude: ['bounce'],
  aliases: {
    enter: 'fadeIn'
  },
  duration: '900ms',
  delay: '0s',
  iterationCount: '1',
  namespaceKeyframes: true,
  respectReducedMotion: true,
  modifiers: true,
  durations: {
    quick: '300ms',
    deliberate: '1400ms'
  },
  delays: {
    short: '150ms',
    long: '800ms'
  },
  repeats: {
    twice: '2',
    forever: 'infinite'
  }
})

Option	Default	Purpose
prefix	keyframe	Prefix for classes and generated keyframes
animations	'*'	Animate.css names to include; '*' includes the full catalog
exclude	[]	Animation names to omit
aliases	{}	Public class names mapped to Animate.css animation names
duration	1s	Default animation duration
delay	0s	Default animation delay
iterationCount	1	Default iteration count
namespaceKeyframes	true	Prefix keyframe identifiers to prevent collisions
respectReducedMotion	true	Minimize animation when the user requests reduced motion
modifiers	true	Generate timing, repeat, pause, and run utilities
durations	Built-in map	Duration modifier tokens
delays	Built-in map	Delay modifier tokens
repeats	Built-in map	Iteration modifier tokens

The deprecated classes option remains an alias for animations during migration.

Generated utilities

With the default prefix, the plugin generates:

<div class="keyframe keyframe-bounce keyframe-duration-fast keyframe-delay-1s keyframe-repeat-2"></div>

• keyframe-duration-{token} sets the duration variable.
• keyframe-delay-{token} sets the delay variable.
• keyframe-repeat-{token} sets the iteration-count variable.
• keyframe-paused and keyframe-running control playback.

Tailwind variants work normally:

<div class="keyframe keyframe-fade-in hover:keyframe-paused md:keyframe-duration-slow"></div>

Aliases

Aliases provide stable semantic names without copying keyframes:

require('motion-helpers-compat')({
  animations: [],
  aliases: {
    notificationEnter: 'fadeInDown',
    notificationExit: 'fadeOutUp'
  }
})

<aside class="keyframe keyframe-notification-enter"></aside>

Catalog

The package exposes the animation names found in the installed Animate.css version:

const keyframes = require('motion-helpers-compat');
console.log(keyframes.catalog());

Dependency note

This package depends on @jasperquinn/postcss-motion-helpers and uses it as-is for global timing CSS variables. That scoped package must be available from your npm registry (or installed from a local/tarball source) when you install this package.

License

MIT