Fade Transitions
Advanced fade transitions with multiple styles, timing functions, and special effects including blur, zoom, rotation, glow, and text splitting
Pro Features
Unlock advanced capabilities with the Pro version
8 Transition Types
Fade, crossfade, dissolve, blur, zoom, slide, rotate, scale
Advanced Effects
Glow, blur, parallax, mask transitions
Multiple Triggers
Auto, hover, click, scroll, manual
Stagger & Cascade
Sequential animations with timing control
7 Easing Functions
Linear, ease, spring, bounce, and more
Text Splitting
Character, word, line animations
Installation
Install via CLI
npx moonui-cli@latest add fade-transitionsUsage
Examples
Fade Types
8 different fade transition types - from simple fade to complex dissolve and crossfade effects
Direction Variants
Slide-fade with 5 different directions - up, down, left, right, and diagonal movement
Trigger Options
Different trigger types - auto play, hover, click, and scroll-based animations
Easing Functions
7 different easing functions for natural and dynamic motion
Stagger Animation
Multiple children with staggered timing for cascading effects
Cascade Effects
Forward, reverse, and random cascade animations for dynamic sequences
Blur & Zoom Effects
Control blur amount and zoom scale for dramatic fade effects
Glow Effects
Add glow effects with customizable colors and intensities during transitions
Interactive Cards
Real-world card components with sophisticated fade transitions
Fade Transition
Smooth entrance animation
Card with elegant fade-in animation for modern UX.
Zoom Fade
Scaling entrance effect
Card with zoom effect for eye-catching presentations.
Text Split Animation
Split text by character, word, or line with staggered fade animations