Triggers

data-anim supports four trigger types. Click each tab to see it in action.

Scroll into view

Default trigger. Animates when the element enters the viewport.

<div data-anim="fadeInUp">...</div>

Viewport (Default)

The element animates when it scrolls into the viewport using IntersectionObserver.

<div data-anim="fadeInUp">
  Animates on scroll (default)
</div>

<!-- With custom offset -->
<div
  data-anim="fadeIn"
  data-anim-offset="200"
>
  Triggers 200px into viewport
</div>

Hover

Plays on mouseenter, resets on mouseleave. Also responds to focus-visible for keyboard users.

<div data-anim="pulse" data-anim-trigger="hover">
  Hover over me
</div>

Click

Replays on every click. Great for buttons and toggles.

<button data-anim="bounce" data-anim-trigger="click">
  Click me to bounce
</button>

Focus

Plays when the element receives focus. Ideal for form inputs.

<input
  type="text"
  data-anim="pulse"
  data-anim-trigger="focus"
  placeholder="Focus me"
/>

Combining Triggers

Each element can only have one trigger. Nest elements for multiple interactions:

<div data-anim="fadeInUp">
  <button data-anim="pulse" data-anim-trigger="hover">
    Interactive button
  </button>
</div>

Summary

Trigger	Value	Use Case
Viewport	`viewport` (default)	Scroll reveals
Hover	`hover`	Buttons, cards
Click	`click`	Toggles, confirmations
Focus	`focus`	Form inputs