TypeScript

data-anim ships with built-in type definitions. Import once and get autocomplete for all data-anim-* attributes — no extra config needed.

Setup

import 'data-anim';

That’s it. This single import registers type augmentations for React (JSX/TSX) and Vue templates.n

What You Get

All data-anim-* attributes are fully typed with autocomplete:

// React / TSX
<div
  data-anim="fadeInUp"             // 30+ animation names
  data-anim-trigger="scroll"       // scroll, load, click, hover
  data-anim-easing="spring"        // ease, ease-out-expo, ease-out-back, spring
  data-anim-stagger-from="center"  // start, end, center, edges
  data-anim-duration="800"
  data-anim-delay="200"
  data-anim-once
/>

Exported Types

You can import types directly for custom use cases:

import type {
  DataAnimName,         // "fadeIn" | "fadeInUp" | "bounce" | ...
  DataAnimTrigger,      // "scroll" | "load" | "click" | "hover"
  DataAnimEasing,       // "ease" | "ease-out-expo" | "ease-out-back" | "spring"
  DataAnimStaggerFrom,  // "start" | "end" | "center" | "edges"
  DataAnimDisable,      // "mobile" | "tablet" | "desktop"
  DataAnimAttributes,   // All data-anim-* attributes as an interface
} from 'data-anim';