data-anim

Getting Started

Installation

CDN

<script src="https://unpkg.com/data-anim@latest/dist/data-anim.js"></script>

npm

npm install data-anim
import 'data-anim';

Basic Usage

<div data-anim="fadeInUp">
  Hello, animated world!
</div>
fadeInUp

See Animations for all 30+ built-in animations.

Triggers

By default, animations play on scroll. See Triggers for all options.

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

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

Customization

<div
  data-anim="slideInLeft"
  data-anim-duration="800"
  data-anim-delay="200"
  data-anim-easing="ease-out"
  data-anim-once
>
  Customized animation
</div>

See Attributes for the full reference and Stagger for cascading sequences.

Next Steps