GSAP Text Reveal Animation with SplitText

I'll recreate this masked text reveal animation using GSAP and the SplitText plugin in a Next.js environment. This effect splits text into lines, words, or characters and animates them with a sliding reveal effect.

How It Works

This implementation recreates the masked text reveal animation from the original CodePen using Next.js and GSAP:

1. Text Splitting: The SplitText plugin divides the text into lines, words, and characters, each with their own CSS classes.

2. Animation Types: Three buttons let you choose different animation styles:

   • Lines: Animates text line by line (slowest, most dramatic)
   • Words: Animates word by word (medium speed)
   • Letters: Animates letter by letter (fastest, most detailed)
3. Animation Effect: Text elements slide up from below with a custom easing function for a smooth, professional look.

4. Technical Implementation:

   • Uses dynamic imports for GSAP plugins to ensure they only load on the client side
   • Maintains the original styling while adapting to Next.js and Tailwind
   • Preserves the custom font from the original

The animation automatically starts when the page loads, and you can click any of the buttons to change the animation style.

Responsive Layout Optimization for Text Reveal Animation

I'll refactor the layout to ensure all content remains within the viewport across all devices while maximizing readability with improved line length and visual flow.

Layout Optimization Improvements

I've refactored the layout to ensure all content remains within the viewport while maximizing readability:

1. Responsive Typography

• Replaced viewport-based text sizing (text-[3.75vw]) with Tailwind's responsive typography classes
• Text now scales appropriately across all device sizes (mobile to desktop)
• Added max-width-prose to maintain optimal line length for readability

2. Viewport Containment

• Added overflow-hidden to prevent horizontal scrolling
• Ensured all content stays within the viewport boundaries
• Implemented responsive padding that adjusts based on screen size

3. Improved Button Layout

• Made buttons responsive with appropriate sizing for different screens
• Added flex-wrap to ensure buttons stack properly on smaller screens
• Adjusted spacing between buttons for better visual hierarchy

4. Enhanced Readability

• Set optimal line length for text content (max-width: 70ch)
• Improved text flow with better spacing and margins
• Ensured text remains readable on all devices with appropriate font sizing

5. Responsive Container

• Increased the maximum width of the container to allow for better text flow
• Added responsive gap spacing between elements
• Implemented proper padding that adjusts based on screen size

These changes ensure that users can easily consume content without horizontal scrolling or text truncation, creating a seamless and engaging browsing experience across all devices.