Fade Transitions
Advanced fade transitions with multiple styles, timing functions, and special effects including blur, zoom, rotation, glow, and text splitting
Pro features
What the Pro version adds to this component.
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 @moontra/moonui-cli 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
Text Split Animation
Split text by character, word, or line with staggered fade animations