Scroll-Triggered Text Reveal Animation

What You'll Create

Text that reveals word-by-word or phrase-by-phrase as the user scrolls down the page. Each text element fades in and slides into position, creating a cinematic storytelling effect that draws attention to your content.

The Problem It Solves

Static text walls don't capture attention the way animated reveals do. If you want that modern, storytelling website feel where text appears as visitors scroll, Squarespace doesn't offer this natively. This technique uses GSAP animation library to create smooth, scroll-triggered text reveals.

Perfect For

Storytelling landing pages, About page narratives, Impact statements, Brand manifestos, Mission statements

What Makes This Different

This uses GSAP's ScrollTrigger plugin to animate individual text elements as they enter the viewport. The animation includes both opacity fade and slight horizontal movement for a polished effect. The scroll-linked timing creates a natural reading rhythm that keeps visitors engaged.

Details

• Section Type: Fluid Engine

• Code Type: CSS + JavaScript

• Prerequisites: GSAP library, Text with span elements, Section with anchor ID

• Toolkit Title: Reveal Part of Text on Scroll

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support