Attributes

Every data-anim feature is controlled through HTML attributes. No JavaScript configuration needed.

Required

Attribute	Type	Default	Description
data-anim	string	—	The animation name to apply. See Animations for the full list.

<div data-anim="fadeInUp">
  Animated element
</div>

Trigger & Timing

Attribute	Type	Default	Description
data-anim-trigger	"viewport" \| "hover" \| "click" \| "focus"	viewport	What triggers the animation.
data-anim-duration	string	600ms	Animation duration (e.g., "400ms", "1.2s").
data-anim-delay	string	0ms	Delay before animation starts.
data-anim-easing	string	ease	CSS easing function (e.g., "ease-out", "cubic-bezier(0.4, 0, 0.2, 1)").

<div
  data-anim="slideInRight"
  data-anim-duration="800ms"
  data-anim-delay="200ms"
  data-anim-easing="ease-out"
>
  Customized timing
</div>

slideInRight

Behavior

Attribute	Type	Default	Description
data-anim-once	"true" \| "false"	true	If true, animation plays only once. If false, replays each time the trigger fires.
data-anim-offset	number	0	Viewport offset in pixels before triggering.
data-anim-mirror	"true" \| "false"	false	Reverse animation when element leaves viewport.

<div
  data-anim="zoomIn"
  data-anim-once="false"
  data-anim-offset="100"
>
  Repeats with 100px offset
</div>

Stagger

Attribute	Type	Default	Description
data-anim-stagger	string	100ms	Delay between staggered child animations.
data-anim-stagger-pattern	"start" \| "end" \| "center" \| "edges"	start	Pattern for stagger order.

<div data-anim-stagger="150ms" data-anim-stagger-pattern="center">
  <div data-anim="fadeInUp">Item 1</div>
  <div data-anim="fadeInUp">Item 2</div>
  <div data-anim="fadeInUp">Item 3</div>
</div>

Responsive

Attribute	Type	Default	Description
data-anim-disable	string	—	Disable animations at a breakpoint (e.g., "mobile", "tablet").
data-anim-mobile	string	—	Override animation for mobile screens.

<!-- Disable on mobile -->
<div data-anim="slideInLeft" data-anim-disable="mobile">
  Desktop only animation
</div>

<!-- Different animation on mobile -->
<div data-anim="slideInLeft" data-anim-mobile="fadeIn">
  Slides on desktop, fades on mobile
</div>

Advanced

Attribute	Type	Default	Description
data-anim-fill	"forwards" \| "backwards" \| "both" \| "none"	forwards	CSS animation-fill-mode.
data-anim-iteration	number \| "infinite"	1	Number of times to play the animation.

<div
  data-anim="pulse"
  data-anim-iteration="infinite"
>
  Infinite pulse
</div>