The RevealAnimationHandler is a powerful, zero-configuration animation system with GSAP as its only dependency. It automatically finds elements with data-reveal attributes and sets their initial opacity. An IntersectionObserver monitors these elements to trigger animations only when they become visible in the viewport. Upon visibility, the handler intelligently analyzes your text content for proper animation.
Each word is dynamically wrapped in a span element within a temporary clone to analyze its position. The system measures Y-coordinates to detect natural line breaks without requiring manual formatting.
Words at the same vertical position are automatically grouped into lines, and the original element is restructured with each detected line wrapped in its own container. The handler applies GSAP animations with your specified timing parameters (duration, delay, stagger) for smooth, professional text reveals that adapt to any screen size or container width.
• data-reveal="perspective": Creates 3D title reveal effect
• data-reveal="slide": Creates line-by-line reveal effect
• data-reveal-duration = '0.8': Controls animation speed
• data-reveal-delay = '0.2': Sets initial delay before animation
• data-reveal-stagger = '0.1': Controls timing between lines
• data-reveal-fade: Adds opacity transition instead of mask transition
• data-reveal-blur: Adds blur and opacity transition for enhanced effect
• data-reveal-keep-will-change: Keeps will-change: transform after animation
• Zero configuration - just import the handler and it works
automatically
• No need to hardcode line breaks - text adapts to any container width
• Perfect for dynamic content from CMS systems
• Works flawlessly across all devices and screen sizes
• Simple developer experience using declarative data-attributes
• Multiple animation types with customizable parameters
• Built-in ARIA accessibility support for screen readers
Grab the divider and resize this panel to see the reveal handler in action! When you resize, the handler detects the dimension change and restores the original HTML that was saved during initialization. This efficient approach avoids the need for computationally expensive text analysis on every resize while maintaining perfect animations.
The blur animation adds a progressive focus effect that creates a more engaging and polished look compared to standard reveals. Text begins completely blurred (15px) and gradually sharpens into view, creating a sense of elements materializing on the page rather than simply appearing. This effect works especially well with larger text and display typography.
