Text Reveal Scroll

Scroll down to see various text reveal animations triggered by scroll position

Line by Line Text Reveal

Each line animates in sequence, creating a dramatic reveal effect.

Perfect for headlines and important statements that need emphasis.

Word by Word Animation

Words appear one by one, creating a rhythmic reading experience.

Character Animation

Each character animates individually with rotation and opacity, creating a dynamic typographic effect that captures attention and adds personality to your text.

Mask Reveal Effect

Text reveals from left to right with a sliding mask

This technique creates a smooth wipe effect that's commonly used in modern web design for elegant text transitions.

    // Text reveal with ScrollTrigger

    gsap.fromTo('.text-reveal-content',

      { y: '100%' },

      { y: '0%',

      duration: 1,

      ease: 'power3.out',

      scrollTrigger: {

        trigger: '.text-reveal',

        start: 'top 85%'

      }

    });