api

data-animate

Zero-config attributes — MotionProvider auto-detects and animates.

Playground

data-animatedata-triggerdata-delaydata-durationContent

Scroll-based previews need you to scroll into view.

Live preview

data-animate block

Code

<div
  data-animate="fadeInUp"
  data-trigger="mount"
  data-delay="0.1"
  data-duration="0.8"
  className="rounded-xl border bg-card p-6"
>
  data-animate block
</div>