skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

gsap-scrolltrigger-storytelling

Build scroll-driven sticky product storytelling sections with GSAP ScrollTrigger timelines.

3|Updated Apr 20, 2026
Search Tags:#react#gsap#parallax#scrolltrigger#scroll animation#product storytelling#sticky sections
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill gsap-scrolltrigger-storytelling-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger-storytelling
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/gsap-scrolltrigger-storytelling
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill gsap-scrolltrigger-storytelling-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Static marketing pages fail to communicate complex product workflows, and ad-hoc scroll animations often break layouts, leak ScrollTriggers, or trap readers in overlong pinned sections. ## Core Features & Use Cases - Pinned Scene Choreography: Uses GSAP ScrollTrigger with scrub and pin to map each scroll segment to explicit timeline labels for sticky product stories. - Progressive UI Reveals: Draws in frames, fades controls, slides panels, counts values, and swaps product states as the user advances through a section. - Safe React Integration: Applies gsap.context() with proper cleanup, matchMedia breakpoints for responsive simplification, and ScrollTrigger refresh after async content loads. - Use Case: A SaaS landing page where a pinned dashboard mockup reveals feature layers one at a time while surrounding copy updates, then hands off to the next section with a masked transition. ## Quick Start Use this skill to build a scroll-driven product storytelling section with GSAP ScrollTrigger that pins the product UI and reveals each feature layer as the user scrolls.

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 animation with GSAP ScrollTrigger?▼

Create a GSAP timeline attached to a ScrollTrigger with pin: true and scrub enabled, then map each scene to explicit timeline labels. This keeps the element fixed while scroll position drives the animation progress.

How to use GSAP ScrollTrigger in React without memory leaks?▼

Wrap animations in gsap.context() inside a useEffect and revert the context on unmount so all ScrollTriggers are killed. Leaving triggers alive after route changes causes duplicated animations and stale pinned offsets.

Does GSAP ScrollTrigger work on mobile and smaller screens?▼

Yes, use ScrollTrigger.matchMedia() or equivalent breakpoints to simplify desktop sticky choreography on smaller screens. Complex pinned scenes can degrade to simple fade-in reveals without breaking the layout.

Why does my ScrollTrigger pin position break after images load?▼

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

Which CSS properties should I animate during scrubbed scroll scenes?▼

Animate transform and opacity only, since they avoid layout recalculation and stay on the compositor thread. Animating width, height, top, or left during scrubbed scenes causes jank and poor scroll performance.

Related Skills

Explore More Design & Creative Skills→
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
TMR1905TMR1905

scroll-animation

Implement scroll-driven animations using CSS, Intersection Observer, and GSAP ScrollTrigger.

Community
Intermediate
primaERPprimaERP

critique

Critiques UX of product interfaces and outputs a structured report with prioritized fixes.

Official
Advanced