Responsive

Not every animation works well on mobile. data-anim lets you swap or disable animations based on screen size.

data-anim-mobile

Swap to a simpler animation on mobile (< 768px). Desktop gets the original, mobile gets the override.

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

data-anim-disable

Disable the animation entirely on a specific breakpoint.

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

<!-- No animation on desktop -->
<div data-anim="fadeInUp" data-anim-disable="desktop">
  Mobile only
</div>

Reduced Motion

prefers-reduced-motion: reduce automatically disables all animations. No manual handling needed.