skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-scrolltrigger-storytelling

Build scroll-driven sticky product storytelling pages with GSAP ScrollTrigger pinned scenes and scrubbed timelines.

5.7k|685|Updated Feb 3, 2026
Search Tags:#storytelling#GSAP#scrolltrigger#scroll animation#Web design#Landing Page#sticky sections
One-click install
npx skills add https://github.com/MengTo/Skills --skill gsap-scrolltrigger-storytelling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger-storytelling
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/gsap-scrolltrigger-storytelling
Command: npx skills add https://github.com/MengTo/Skills --skill gsap-scrolltrigger-storytelling

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, scrolltrigger, and includes assets (resource) components.

What problem does it solve?

Static marketing layouts fail to communicate complex product narratives; this Skill provides a structured playbook for choreographing scroll-synced animations so each scroll segment reveals a new product state, feature layer, or workflow step without breaking readability or performance.

Core Features & Use Cases

  • Pinned scene choreography: Use GSAP ScrollTrigger with pin: true and scrub timelines mapped to explicit labels for sticky product storytelling sections.
  • Progressive UI reveals: Draw in frames, fade controls, slide panels, count values up, and swap states as the user advances through the narrative.
  • Cinematic transitions and depth: Apply section handoffs, parallax layers, masks, and smooth interpolation via quickSetter/quickTo while keeping text contrast and CTAs intact.
  • Use Case: Recreate a premium landing page like the included Cleopatra LP Markets demo, where a pinned analytics panel updates in measured steps as the user scrolls through the product story.

Quick Start

Use the gsap-scrolltrigger-storytelling skill to build a responsive single-page product story with pinned scroll scenes and progressive UI reveals based on the included demo reference.

Frequently Asked Questions about gsap-scrolltrigger-storytelling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a pinned scroll section with GSAP ScrollTrigger?▼

Create a GSAP timeline with ScrollTrigger set to `pin: true` and `scrub` enabled, then map each scene to explicit timeline labels. This keeps the main artifact fixed while surrounding narrative steps update in measured scroll-driven stages.

How to animate UI reveals on scroll with GSAP?▼

Use scrubbed timelines to draw in frames, fade in controls, slide panels, and count values up with short offsets and shared easing. Prefer transform and opacity properties over layout-affecting properties like width, height, top, or left.

Does GSAP ScrollTrigger work with React components?▼

Yes, wrap animations in `gsap.context()` inside React components and clean up the context on unmount so ScrollTriggers are killed correctly. This prevents leaked triggers after route changes or component removal.

Why does my ScrollTrigger animation break after images load?▼

Images, fonts, or async content can change section heights and pinned offsets after ScrollTrigger initializes. Call ScrollTrigger.refresh() after those assets load so trigger positions recalculate correctly.

When should I avoid pinned scroll storytelling sections?▼

Avoid pinning when it traps readers too long, hides CTAs, or reduces text contrast. Reserve high-impact transitions for section handoffs, and use matchMedia breakpoints to simplify sticky choreography on smaller screens.

Related Skills

Explore More Design & Creative Skills→
lucasfthlucasfth

dogfood

Explore web applications to identify defects and generate structured reports.

Community
Advanced
jokken79jokken79
1

scroll-experience

Design scroll-driven storytelling with parallax, sticky sections, and scroll-triggered reveals.

Community
Advanced
RSHVRRSHVR
1

elite-accessibility

Apply motion accessibility patterns to CSS and GSAP web animations.

Community
Advanced
hii-saikrishnahii-saikrishna

locomotive-scroll

Implement smooth scrolling, parallax effects, and scroll-driven animations with JavaScript and GSAP.

Community
Intermediate