tw-animations

Extended animation utilities for Tailwind CSS v4 and v3. 85+ animations, scroll timelines, and view animations with zero configuration.

Website • Configurator • GitHub

✨ Features

• 85+ Animations - Attention seekers, fades, slides, zooms, rotations, and more
• Scroll Animations - View timelines and animation ranges based on scroll position (NEW in v2.0)
• Zero Configuration - Just import and start animating
• Dual Support - Works with both Tailwind CSS v4 and v3
• Fully Customizable - Control duration, delay, timing, direction, and more
• CSS Custom Properties - Easy theming and dynamic control
• Arbitrary Values - Use any value with bracket notation
• Modern & Lightweight - Built with CSS custom properties and @utility syntax

📦 Packages

This monorepo contains two packages:

Package	Version	Description
tw-animations		For Tailwind CSS v4 (CSS-only)
tw-animations-plugin		For Tailwind CSS v3 (Plugin)

🚀 Installation

For Tailwind CSS v4

npm install tw-animations

Add the import to your CSS file:

@import "tailwindcss";
@import "tw-animations";

For Tailwind CSS v3

npm install tw-animations-plugin

Add the plugin to your Tailwind configuration:

// tailwind.config.js
module.exports = {
  plugins: [require("tw-animations-plugin")],
};

🎯 Quick Start

Basic Animation

<div class="animate-fade-in">Hello World!</div>

With Controls

<button class="animate-bounce animate-infinite animate-duration-[2s]">
  Click me
</button>

Scroll Animation (NEW in v2.0)

<div class="timeline-view animate-fade-in-up animate-range-entry">
  Appears when entering viewport
</div>

🎨 Available Animations

Attention Seekers (16)

animate-flash • animate-head-shake • animate-heart-beat • animate-jelly • animate-rubber-band • animate-shake-x • animate-shake-y • animate-swing • animate-tada • animate-wiggle • animate-wobble • animate-float • animate-spin • animate-ping • animate-pulse • animate-bounce

New Animations (v2.0)

animate-blurred-fade-in • animate-blink • animate-dancing • animate-jiggle • animate-pop • animate-rotate-360 • animate-rotate-180 • animate-rotate-90 • animate-expand-horizontally • animate-expand-vertically • animate-bounce-fade-in • animate-pulse-fade-in

Fading Entrances (5)

animate-fade-in • animate-fade-in-down • animate-fade-in-start • animate-fade-in-end • animate-fade-in-up

Fading Exits (5)

animate-fade-out • animate-fade-out-down • animate-fade-out-start • animate-fade-out-end • animate-fade-out-up

Sliding Entrances/Exits (8)

animate-slide-in-down • animate-slide-in-start • animate-slide-in-end • animate-slide-in-up • animate-slide-out-down • animate-slide-out-start • animate-slide-out-end • animate-slide-out-up

Zooming Entrances/Exits (10)

animate-zoom-in • animate-zoom-in-down • animate-zoom-in-start • animate-zoom-in-end • animate-zoom-in-up • animate-zoom-out • animate-zoom-out-down • animate-zoom-out-start • animate-zoom-out-end • animate-zoom-out-up

Bouncing Entrances/Exits (10)

animate-bounce-in • animate-bounce-in-down • animate-bounce-in-start • animate-bounce-in-end • animate-bounce-in-up • animate-bounce-out • animate-bounce-out-down • animate-bounce-out-start • animate-bounce-out-end • animate-bounce-out-up

Rotating Entrances/Exits (10)

animate-rotate-in • animate-rotate-in-down-start • animate-rotate-in-down-end • animate-rotate-in-up-start • animate-rotate-in-up-end • animate-rotate-out • animate-rotate-out-down-start • animate-rotate-out-down-end • animate-rotate-out-up-start • animate-rotate-out-up-end

Back Entrances/Exits (8)

animate-back-in-down • animate-back-in-start • animate-back-in-end • animate-back-in-up • animate-back-out-down • animate-back-out-start • animate-back-out-end • animate-back-out-up

Flippers (5)

animate-flip • animate-flip-in-x • animate-flip-in-y • animate-flip-out-x • animate-flip-out-y

Specials (6)

animate-hinge • animate-jack-in • animate-jack-out • animate-roll-in • animate-roll-out • animate-particle

Dashing (4)

animate-dash-in-start • animate-dash-in-end • animate-dash-out-start • animate-dash-out-end

📜 Scroll Animations (NEW in v2.0)

Animate elements based on their scroll position in the viewport.

View Timelines

<!-- Animate when element enters viewport -->
<div class="timeline-view animate-fade-in">...</div>

<!-- Animate on horizontal scroll -->
<div class="timeline-view-x animate-slide-in-start">...</div>

<!-- Animate on vertical scroll -->
<div class="timeline-view-y animate-fade-in-up">...</div>

Animation Ranges

Control when animations play during scroll:

<!-- Play when entering viewport -->
<div class="timeline-view animate-zoom-in animate-range-entry">...</div>

<!-- Play when leaving viewport -->
<div class="timeline-view animate-fade-out animate-range-exit">...</div>

<!-- Play while in viewport -->
<div class="timeline-view animate-rotate-360 animate-range-cover">...</div>

<!-- Preset ranges -->
<div class="timeline-view animate-fade-in animate-range-gradual">...</div>
<!-- gradual (10%-90%) | moderate (20%-80%) | brisk (30%-70%) | rapid (40%-60%) -->

Arbitrary Range Values

<div class="timeline-view animate-fade-in animate-range-[entry_10%_cover_50%]">
  Custom range
</div>

Browser Support for Scroll Animations

Scroll animations require:

• Chrome/Edge: 115+
• Safari: 17.4+
• Firefox: Coming soon (currently in development)

🎛️ Control Utilities

Duration

<div class="animate-fade-in animate-duration-500">Fast fade</div>
<div class="animate-bounce animate-duration-[2s]">Slow bounce</div>

Delay

<div class="animate-fade-in animate-delay-[1s]">Delayed entrance</div>

Iteration Count

<div class="animate-pulse animate-infinite">Never stops</div>
<div class="animate-bounce animate-twice">Bounce twice</div>
<div class="animate-shake-x animate-iteration-5">Shake 5 times</div>

Direction

<div class="animate-spin animate-reverse">Reverse spin</div>
<div class="animate-wiggle animate-alternate animate-infinite">
  Back and forth
</div>

Fill Mode

<div class="animate-fade-in animate-fill-both">Maintains final state</div>

Timing Functions

<div class="animate-bounce animate-ease-in-out">Smooth bounce</div>
<div class="animate-fade-in animate-ease-linear">Linear fade</div>

Play State

<div class="animate-spin animate-pause hover:animate-play">Spin on hover</div>

🎨 CSS Custom Properties

Customize animations globally:

:root {
  --default-animation-duration: 0.5s;
  --default-animation-delay: 0s;
  --default-animation-timing-function: ease-in-out;
}

/* Theme-specific customization */
.dark {
  --default-animation-duration: 0.8s;
}

💡 Advanced Usage

Hover Animations

<button class="hover:animate-wiggle hover:animate-infinite">
  Hover to wiggle
</button>

Responsive Animations

<div class="animate-bounce md:animate-fade-in lg:animate-none">
  Responsive animation
</div>

Combining Utilities

<div
  class="animate-fade-in animate-duration-[2s] animate-delay-500 animate-ease-in-out"
>
  Smooth, delayed fade in
</div>

📚 Documentation

• Website & Interactive Demos
• Animation Configurator
• GitHub Repository
• npm Package (v4)
• npm Package (v3)

🔄 Migration from @iscodex/tailwindcss-animate

The package was renamed to tw-animations (v4) and tw-animations-plugin (v3). The old scoped package @iscodex/tailwindcss-animate remains on npm but is deprecated.

To migrate:

• Tailwind v4: Replace @iscodex/tailwindcss-animate with tw-animations in your package.json, then update your CSS import to @import "tw-animations";.
• Tailwind v3: Replace with tw-animations-plugin and use require("tw-animations-plugin") in your config.

Class names and behavior are the same; only the package name and import path change.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see LICENSE file for details.

🙏 Credits

Created with ❤️ by alckordev

📝 Changelog

See CHANGELOG for version history and changes.

---

⭐ If you find this useful, please consider giving it a star on GitHub!