GSAP ScrollTrigger
Overview
GSAP (GreenSock Animation Platform) is the industry standard for high-performance web animation. Its ScrollTrigger plugin turns scroll position into a timeline controller, enabling animations that are scrubbed, pinned, and sequenced with precision. This showcase demonstrates five distinct ScrollTrigger techniques in a single page.
Techniques Demonstrated
1. Pinned Section with Progress Bar
The hero section pins in place while the user scrolls through 200% of viewport height. A progress bar fills across the top, an SVG circuit diagram draws itself, and text elements fade in at specific progress milestones. This immediately teaches the viewer that their scroll controls the animation.
2. SVG Path Draw-on-Scroll
A blueprint-style SVG draws stroke-by-stroke as the user scrolls. Each path group represents a project phase — Plan, Design, Build, Ship — with labels appearing as their corresponding strokes complete. The technique uses stroke-dasharray and stroke-dashoffset, avoiding any premium GSAP plugins.
3. Text Split Animation
A large headline animates word by word — each word flies in from below with opacity and rotation transforms. A custom 15-line JavaScript text splitter wraps each word in a <span> element, then GSAP's stagger property with scrub ties the reveal to scroll position. No premium SplitText plugin needed.
4. Horizontal Scroll Gallery
Vertical scrolling drives horizontal panel movement through a pinned container. Four panels demonstrate different visual treatments: large typography with parallax, an image reveal wipe, animated bar charts, and a closing CTA. The container uses display: flex with ScrollTrigger translating its x position based on scroll progress.
5. Before/After Image Wipe
A vertical divider line sweeps across a before/after comparison, driven by scroll position. The "after" layer uses clip-path: inset() animated from fully clipped to fully revealed, with a draggable indicator following the wipe edge.
Licensing Note
Both GSAP core and ScrollTrigger are free for all use cases, including commercial projects. The showcase avoids premium Club GSAP plugins (SplitText, DrawSVGPlugin) by using equivalent free techniques: a custom text splitter and stroke-dashoffset animation.
Real-World Applications
SaaS Product Tours
Walk prospects through features one scroll at a time. Pinned sections with scrubbed animations let each feature breathe instead of competing for attention on a crowded page.
Real Estate & Architecture
Scroll-driven floor plan reveals, before/after renovation wipes, and horizontal gallery tours let buyers explore properties at their own pace.
Editorial & Longform Content
Publications like the New York Times and Bloomberg use scroll-triggered animations to make data journalism interactive. Charts draw as you read.
E-Commerce Product Pages
Horizontal scroll galleries, zoom reveals, and ingredient/feature breakdowns driven by scroll position increase time on page and purchase confidence.