accelerate-animate

Extremely simple, composable, class-based animations for HTML with a utility-first feel.

Install

npm i accelerate-animate

Quickstart (plain HTML)

<link rel="stylesheet" href="accelerate-animate/accelerate.css" />
<script type="module">
  import { init } from "accelerate-animate";
  init();
</script>

<div class="anim fade-in dur-150 ease-out">hello</div>
<div class="anim inview slide-up dur-250 delay-50">viewport</div>

anim is required. Only elements with anim are processed.

Composable utilities

• Animation classes: fade-in, fade-out, slide-up, slide-down, slide-left, slide-right, scale-in, scale-out, bounce, spin, zoom-in, zoom-out, pop-in, pop-out, blur-in, blur-out, rotate-in, rotate-out, flip-x, flip-y, drift-up, drift-down, drift-left, drift-right, skew-in, skew-out, pulse, flash, shake-x, shake-y, wobble, swing, float, heartbeat, fade-up, fade-down, fade-left, fade-right, roll-in, roll-out, twirl-in, twirl-out, zoom-spin-in, zoom-spin-out, flip-in, flip-out, reveal-up, reveal-down, reveal-left, reveal-right, lift-up, lift-down, lift-left, lift-right, snap-in, snap-out, swirl-in, swirl-out, spin-in, spin-out, ghost-in, ghost-out, drop-in, drop-out, rise-in, rise-out, tilt-in, tilt-out, hinge-in, hinge-out, squash-in, squash-out, stretch-in, stretch-out, ripple-in, ripple-out, shimmer, blink, jolt-x, jolt-y, tremor, bob, hover-up, hover-down, pop-left, pop-right, soft-zoom-in, soft-zoom-out, blur-zoom-in, blur-zoom-out, sweep-left, sweep-right, curtain-up, curtain-down, fold-in, fold-out, unfold-in, unfold-out, arc-in, arc-out
• Duration: dur-150, dur-500, arbitrary runtime values like dur-137
• Delay: delay-50, arbitrary runtime values like delay-25
• Easing: ease-linear, ease-in, ease-out, ease-in-out, or custom ease-*
• Repeat: repeat-2, repeat-3, infinite, loop, once
• Intensity tokens:
  • dist-{n} sets --a-dist in px (default 12px)
  • scale-{n} sets --a-scale (scale-105 => 1.05)
  • blur-{n} sets --a-blur in px

Viewport trigger (inview)

Elements with inview animate when entering viewport (IntersectionObserver based).

<div class="anim inview slide-up dur-250"></div>

Defaults:

• First trigger runs once.
• Use repeat-inview to rerun each time it enters.
• once still works and keeps iteration at 1.

init viewport options:

init({
  rootMargin: "0px 0px -10% 0px",
  threshold: 0.1
});

Staggering lists

Use stagger-{ms} on a parent. Child .anim elements receive incremental delay:

finalDelay = delay + index * stagger

<ul class="inview stagger-80">
  <li class="anim slide-up dur-200">A</li>
  <li class="anim slide-up dur-200">B</li>
  <li class="anim slide-up dur-200">C</li>
</ul>

Works with inview: once the parent enters view, children animate in a staggered sequence.

Leave API (exit animations before unmount)

import { leave } from "accelerate-animate";

await leave(node);
node.remove();

Optional override:

await leave(node, { animation: "fade-out", duration: 180, delay: 30 });

React example

import { leave } from "accelerate-animate";

async function removeWithAnim(el: HTMLElement, remove: () => void) {
  await leave(el, { animation: "slide-down", duration: 160 });
  remove();
}

Vue example

import { leave } from "accelerate-animate";

async function beforeRemove(el: Element, done: () => void) {
  await leave(el);
  done();
}

Svelte example

import { leave } from "accelerate-animate";

async function destroyNode(el: HTMLElement) {
  await leave(el, { animation: "scale-out" });
  el.remove();
}

SSR and hydration safety

• No window/document access at import time.
• init() no-ops in non-browser environments.
• init({ ssrSafe: true }) defers scanning until DOMContentLoaded unless root is passed.

Anti-FOUC with inview

inview elements stay in pre-animation state until activated, then runtime sets:

• class accelerate-ready and ready
• attribute data-accelerate-ready="true"

This prevents flash before animation activation.

Reduced motion

By default, when prefers-reduced-motion: reduce is active, animations are disabled.

• Add force-motion on an element to opt back in.
• Global option: init({ respectReducedMotion: false }).

Debug mode

init({ debug: true });

Debug mode groups logs with:

• detected element summary
• parsed config
• stagger metadata when applicable

Framework usage

Next.js / Vite / Remix / SvelteKit / Nuxt

1. Import CSS globally.
2. Call init() on the client.

import "accelerate-animate/accelerate.css";
import { init } from "accelerate-animate";

init({ ssrSafe: true });

React hook adapter

import "accelerate-animate/accelerate.css";
import { useaccelerate } from "accelerate-animate/react";

export function App() {
  useaccelerate({ ssrSafe: true });
  return <div className="anim fade-in">hello</div>;
}

Vue plugin/directive adapter

import "accelerate-animate/accelerate.css";
import { createApp } from "vue";
import { acceleratePlugin } from "accelerate-animate/vue";

const app = createApp(App);
app.use(acceleratePlugin, { ssrSafe: true });

Directive form:

<div v-accelerate>
  <div class="anim inview slide-up">item</div>
</div>

CSS output mode

accelerate.css ships:

• keyframes for all supported animations
• base .anim variable-driven animation styling
• easing and repeat/infinite utilities
• inview pre-state styles
• defaults for intensity variables
• convenience duration classes: dur-50, dur-100, dur-150, dur-200, dur-300, dur-500, dur-1000
• convenience delay classes: delay-0, delay-50, delay-100, delay-150, delay-200, delay-300, delay-500

Arbitrary dur-* and delay-* values are runtime-applied via inline CSS variables.

API

init(options?: {
  root?: Document | Element | ShadowRoot;
  observe?: boolean;
  inview?: boolean;
  debug?: boolean;
  ssrSafe?: boolean;
  rootMargin?: string;
  threshold?: number | number[];
  respectReducedMotion?: boolean;
}): void | (() => void)

apply(el: Element): void
leave(el: Element, opts?: {
  animation?: string;
  duration?: number;
  delay?: number;
  ease?: string;
  fallbackMs?: number;
}): Promise<void>

Example

Open examples/index.html after building:

npm run build