Text effect

Phive Text Scroll Animation

by Vanguardia · motionprompts.dev

Scroll-driven sequence of pinned full-screen sections where giant uppercase words stretch open vertically (scaleY driven by each ScrollTrigger's scrub progress) and collapse as they leave; the final word scales up 10x while its dark backdrop fades to reveal a background image, then a SplitText headline reveals word-by-word.

Type: Web motion
Framework: GSAP
Trigger: scroll

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Complexity: 5/5
Pinned: yes
Reduced motion: not handled
Libraries: gsap, ScrollTrigger, SplitText, lenis

Pure linear scrub (no eases, no durations): each of three pinned sections stretches its headline on scaleY from 0 up to a measured sectionHeight/textHeight ratio on approach, then back to 0 while pinned; the third pinned section additionally zooms its text panel scale3d 1→10 over the first 75% of a 400vh pin, cross-fades the panel background alpha (0.25→0.5) and its opacity (0.5→0.75) to zero, and reveals the header word-by-word by index threshold over 0.75→0.95. Smoothing comes only from scrub:1 and Lenis inertia.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev15,984 chars

# Giant Stretching Text Scroll Animation

## Goal

Build a scroll-driven typographic page: a sequence of full-screen pinned sections where a single giant upperc…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.