skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-scrolltrigger-storytelling

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

Updated May 5, 2026
Search Tags:#react#gsap#parallax#scrolltrigger#scroll animation#product storytelling#sticky sections
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill gsap-scrolltrigger-storytelling-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger-storytelling
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/gsap-scrolltrigger-storytelling
Command: npx skills add https://github.com/josippapez/ai-setup --skill gsap-scrolltrigger-storytelling-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Static marketing pages fail to communicate complex product narratives, and ad-hoc scroll animations often feel janky, break layouts, or leak ScrollTriggers after unmounts. This Skill provides a structured workflow for building cinematic, scroll-synced product storytelling sections that stay readable and performant. ## Core Features & Use Cases - Pinned scroll narratives: Use GSAP ScrollTrigger with pin and scrub to keep a product frame sticky while copy, panels, and UI states update in labeled timeline steps. - Progressive UI reveals: Choreograph layer-by-layer reveals of controls, overlays, screenshots, and data views with shared easing and transform/opacity-only animation. - React-safe lifecycle management: Wrap animations in gsap.context(), clean up on unmount, refresh after async content loads, and degrade gracefully on small screens via matchMedia(). - Use Case: A SaaS landing page where scrolling pins a device mockup while each scroll segment reveals a new feature panel, highlights a UI region, and transitions into the next section with a masked handoff. ## Quick Start Use the gsap-scrolltrigger-storytelling skill to build a pinned scroll-driven product story section for my landing page.

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 mapped to labeled scenes, then attach a ScrollTrigger with pin: true and scrub enabled so scroll position drives playback. Extend the pin duration for dense stories and shorten it for scenes with few state changes.

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

Wrap all ScrollTrigger creation in gsap.context() inside the component and revert that context on unmount so triggers are killed correctly. This prevents orphaned triggers after route changes or component removal.

Why does my ScrollTrigger animation jump after images load?▼

ScrollTrigger calculates pin offsets before async content finishes loading, so late-loading images or fonts shift section heights. Call ScrollTrigger.refresh() after images, fonts, or async content load to recalculate positions.

Should I use scrub or regular tweens for scroll animations?▼

Use scrubbed timelines for the main scroll narrative so animation progress maps directly to scroll position, and reserve regular tweens for entrance or hover motion. Use direct scrub for precise walkthroughs and eased scrub for a cinematic feel.

What CSS properties should I avoid animating with ScrollTrigger?▼

Avoid animating width, height, top, left, and other layout-affecting properties during scrubbed scenes because they trigger reflow and hurt performance. Prefer transform and opacity, and apply will-change sparingly only to elements that need it.

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
flitzrrrflitzrrr
4

landing-pages

Optimize landing pages for conversion with single-goal architecture and A/B testing.

Community
Intermediate
RSHVRRSHVR
1

elite-accessibility

Apply motion accessibility patterns to CSS and GSAP web animations.

Community
Advanced
alexejluftalexejluft

scrolling-with-purpose

Enforce GSAP ScrollTrigger, React, and Lenis scroll animation best practices.

Community
Intermediate