Drop-in scroll animations using HTML attributes. Built-in anti-FOUC protection. Under 2KB. No dependencies.
$ npm install data-anim
Pure CSS animations triggered by HTML attributes. Just add data attributes.
3-layer defense against Flash of Unstyled Content. No manual CSS workarounds needed.
Tiny footprint. No dependencies. Loads in under 5ms. Smaller than most favicons.
Full autocomplete for all data-anim attributes in React and Vue. Just import and go.
No config files. No build step. No framework required.
<!-- 1. Add the script -->
<script src="https://unpkg.com/data-anim@latest/dist/data-anim.js"></script>
<!-- 2. Add the attribute -->
<div data-anim="fadeInUp">
Your content animates on scroll
</div>
<!-- 3. There is no step 3 -->Animation Library
From subtle fades to playful bounces. Every animation is GPU-accelerated and respects prefers-reduced-motion.
Smooth opacity transitions with optional directional movement.
fadeInfadeInUpfadeInDownfadeInLeftfadeInRight Full-width entrance animations from any direction.
slideInUpslideInDownslideInLeftslideInRight Scale-based entrances for impactful reveals.
zoomInzoomOutzoomInUpzoomInDown Playful multi-step animations with overshoot.
bouncebounceInbounceInUpbounceInDown In-place effects for drawing the eye. Perfect for hover and click.
shakepulsewobbleflipswingrubberBand Rotation entrances, blur reveals, and more.
rotateInblurclipRevealtypewriter