Skip to content
Get packs

GSAP Scroll Storytelling

Builds cinematic, scroll-driven product pages with pinned sections and animated reveals using GSAP ScrollTrigger.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, the agent follows a set of guidelines for building scroll-driven product pages, where the page unfolds as a story as the visitor scrolls. Sections stay pinned in place while copy, screenshots and UI panels animate in step by step, with smooth transitions between sections. The guidance also covers keeping the motion readable, simplifying it on small screens, and cleaning up animations in React components.

Great for

  • Front-end developers building a product landing page with scroll-based storytelling
  • Designers who want a cinematic, scroll-driven concept for a product launch
  • Teams already using GSAP who want consistent ScrollTrigger patterns

Skip it if

  • Simple static marketing sites, since the skill is designed for scroll-driven narratives and would add unnecessary complexity
  • Projects that cannot load the GSAP library, since the guidance depends on GSAP ScrollTrigger and will not work without it
  • Pages where readers need quick access to content, since pinned sections can make the page feel slow or broken if overused

Try asking

  • “Build a sticky scroll story that walks visitors through the three main features of my app”
  • “Add pinned sections with scroll-synced reveals to my product landing page using GSAP ScrollTrigger”
  • “Make my React product page's scroll animations clean up properly on unmount”
  • “Adapt my scroll animations so they simplify on mobile screens”
Step-by-step guide: how to use GSAP Scroll StorytellingInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    gsap-scrolltrigger-storytelling.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip gsap-scrolltrigger-storytelling.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip gsap-scrolltrigger-storytelling.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the product story beats you want, such as each feature or workflow step, so the agent can map them to timeline labels
  • Ask for a reduced-motion or mobile version up front, since the skill recommends matchMedia for simplifying on smaller screens
  • Check that text contrast and CTA buttons stay visible during animations, as the skill warns against covering them

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.