Text Reveal Reverse

Lesson 15

Each .reveal-block has its own ScrollTrigger with toggleActions: 'play none none reverse'. When a block scrolls back above its trigger, the lines slide back down behind their overflow: hidden masks. The word-by-word .words-block uses the same pattern with a shorter stagger: 0.08.

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%',
      toggleActions: 'play none none reverse',
    },
  });
});

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