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%'
  }
});