Text Reveal

Lesson 4

Each .line starts at transform: translateY(100%) inside an overflow: hidden .line-wrap — the overflow masks the hidden state. GSAP tweens .line to y: 0, creating a “sliding up from a mask” effect. stagger: 0.12 staggers each line for a cascading reveal.

Source Code script.js

gsap.registerPlugin(ScrollTrigger);

// Line-by-line reveal for each .reveal-block
gsap.utils.toArray('.reveal-block').forEach((block) => {
  const lines = block.querySelectorAll('.line');
  gsap.to(lines, {
    y: 0,
    duration: 0.7,
    ease: 'power2.out',
    stagger: 0.12,
    scrollTrigger: {
      trigger: block,
      start: 'top 85%',
    },
  });
});

// Word-by-word reveal
const words = document.querySelectorAll('.word');
gsap.to(words, {
  y: 0,
  duration: 0.6,
  ease: 'power2.out',
  stagger: 0.08,
  scrollTrigger: {
    trigger: '.words-block',
    start: 'top 85%',
  },
});