🎨 Interactive Tool

Animation Configurator

Customize and preview animations in real-time

Preview
Box
class
animate-fade-in

Documentation

Usage Guide

How to get the most out of the configurator: basic playback, scroll-driven animations, and custom values.

Basic Animations

  1. Select an animation from the dropdown
  2. Adjust duration and delay if needed
  3. Copy the generated class and paste it into your markup

Scroll timeline

  1. Enable Scroll timeline and pick a range (e.g. gradual, rapid)
  2. Scroll inside the preview to see the animation run with scroll progress
  3. Copy the timeline-view classes
Chrome 115+, Edge 115+, Safari 17.4+

Arbitrary values

Use bracket notation for custom duration or delay in your project:

animate-duration-[2.5s] animate-delay-300

Reference

Usage Examples

Copy-paste patterns for common use cases.

Button hover

Pulse on hover

hover:animate-pulse

Loading spinner

Continuous rotation

animate-spin

Alert badge

Bounce for attention

New!
animate-bounce