romboHQ/tailwindcss-motion
Tailwindcss Motion
This project is a Tailwind CSS animation library and accessibility-aware motion framework. It provides a collection of utility classes for adding high-performance keyframe animations and motion effects to web projects, while automatically respecting user-defined reduced motion preferences.
The system includes a browser-based animation designer for creating and exporting custom presets as CSS styles or utility classes. It also functions as a scroll-triggered animation framework, enabling entrance and exit transitions that execute as elements enter the viewport, including support for staggered timing.
The library covers a broad range of animation effects, including visual property animations for opacity, scale, rotation, and color, as well as looping and sequence coordination. It provides tools for managing animation timing, playback states, and easing coordination through composable utilities.
Features
- CSS Animation Utilities - Provides a collection of Tailwind CSS utility classes based on native CSS keyframes for high-performance motion.
- Animation Utilities - Provides a comprehensive set of Tailwind CSS utility classes for adding animations without writing custom keyframes.
- Accessibility Motion Controls - Provides automatic support for system-level reduced motion settings to ensure accessibility compliance.
- Motion Accessibility Utilities - Implements motion design that automatically adapts based on the user's system reduced-motion preferences.
- Accessibility-Aware Animations - Provides animation tools that dynamically adjust or disable movement based on system-level reduced motion settings.
- Utility-First Class Systems - Uses a utility-first approach to compose complex animation sequences by combining single-purpose CSS classes.
- Scroll-Triggered Animations - Executes animations and staggered sequences when elements enter the viewport via scroll intersection.
- Motion Preference Handlers - Uses the prefers-reduced-motion media query to conditionally disable movement-based animations.
- Animation Presets - Provides reusable animation presets that combine multiple properties into single utility classes.
- Animation Preset Designers - Ships a browser-based designer for creating and exporting custom animation presets as CSS or utility classes.
- Visual Property Utilities - Provides utility classes for animating opacity, scale, rotation, and color to create visual effects.
- Visual Preset Editors - Ships a browser-based designer for visually creating and exporting custom animation presets as CSS or utility classes.
- Animation Timing Utilities - Provides utilities to manage timing parameters like duration and delays globally or per property.
- Enter Animations - Provides declarative utilities to trigger fading, sliding, or unblurring when elements mount or enter the viewport.
- Animation Easing Functions - Offers predefined values to coordinate duration, delay, and easing for smooth visual transitions.
- CSS Variable Animators - Uses CSS custom properties to define animation values, allowing global and element-level overrides.
- Continuous Loops - Implements the ability to repeat animations indefinitely between a default state and a target value.
- Animation Playback Settings - Includes configuration settings for animation repetition counts and playback direction.
- Animation Properties - Allows applying timing or state modifiers to individual visual attributes within a multi-property animation.
- Animation Playback Controls - Provides methods to pause and resume animations based on interaction or state changes.
- Element Transitioning Mechanisms - Implements transitions to move elements from a default state to a final state via scale, opacity, or blur.
- Motion Effects - Offers inline utility classes for applying motion effects to dimensions and opacity.
- Keyframe Animation Engines - Utilizes browser-native CSS keyframes for hardware-accelerated and high-performance transitions.
- Motion Design Systems - Offers consistent motion patterns, easing, and coordination for entrance, exit, and looping UI animations.
- Animation Sequencing - Coordinates the timing and order of multiple properties for complex entrance and exit transitions.
- Viewport Visibility Observers - Leverages the Intersection Observer API to trigger entrance animations and stagger sequences.
