Skip to content
Get packs

Guide · Agent skill

How to use the GSAP Scroll Storytelling agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The gsap-scrolltrigger-storytelling skill is a set of guidelines that teaches an AI coding agent how to build scroll-driven product pages with GSAP ScrollTrigger. Instead of a static layout, the page unfolds as a story: sections stay pinned while copy, screenshots and UI panels animate in step by step. This guide explains what the skill changes in the agent's output, how to install it, how to ask for the right thing, and when to choose a simpler approach.

GSAP Scroll StorytellingMengTo/Skills · MIT

Quick start

  1. 1Get GSAP with ScrollTrigger. Make sure your project loads the GSAP library and the ScrollTrigger plugin, since the skill depends on both.
  2. 2Download the skill ZIP. Download the ZIP for gsap-scrolltrigger-storytelling from this page.
  3. 3Unzip into the right folder. Unzip into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder for one project. In the Claude apps, upload it under Settings → Capabilities → Skills instead.
  4. 4Write a clear request. Describe the product, the sections to show and the tone, and mention $gsap-scrolltrigger-storytelling or describe a scroll-driven story.
  5. 5Review the output. Check the generated code for pinned section length, text contrast, CTA visibility and ScrollTrigger cleanup in React.
  6. 6Test on mobile and refine. Scroll the page on small screens, simplify motion where it feels slow, and adjust pin duration and scrub style as needed.

What does the skill make the agent do?

When the skill is active, the agent follows a defined set of guidelines for scroll-driven product pages. Sticky sections stay in place while the surrounding copy, screenshots, overlays and UI panels update in measured steps, and transitions carry the reader from one section to the next.

The guidance also covers keeping motion readable, simplifying the effects on smaller screens, and cleaning up animations in React components so ScrollTriggers do not stay alive after a component unmounts.

  • Pinned product frames with scroll-scrubbed timelines using timeline labels per scene
  • Progressive UI reveals such as fading in controls, sliding panels into place and counting values up
  • Section handoffs using scale, mask, blur or translate rather than abrupt cuts
  • Smooth pointer or scroll-reactive details using quickSetter, quickTo or lerped values
  • Responsive simplification with matchMedia() or breakpoints

Install the skill from the ZIP

Download the ZIP for this skill from this page. The skill folder is agent-skills/web-design/gsap-scrolltrigger-storytelling and contains SKILL.md, plus a demo folder with index.html, PROMPT.md and source.json.

To install it for your user account, unzip the folder into ~/.claude/skills/. To install it for one project only, unzip it into the project's .claude/skills/ folder. Claude will then have the skill available in that location.

If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the skill there.

  • Personal install: ~/.claude/skills/
  • Project install: .claude/skills/ inside your project
  • Claude apps: Settings → Capabilities → Skills, then upload

How do you trigger the skill with a request?

You do not need special syntax to describe the work. Ask for a scroll-driven or sticky product story in plain language and name the page you want. The demo prompt in the package refers to the skill directly as $gsap-scrolltrigger-storytelling, which is a clear way to point the agent at it.

Give the agent the product, the sections or features to show, and the tone. Mention the stack if it matters, for example plain HTML/CSS/JavaScript or React.

  • Use $gsap-scrolltrigger-storytelling to build a sticky scroll story for a product launch page with three feature sections.
  • Use $gsap-scrolltrigger-storytelling to convert this static landing page into a pinned scroll narrative, keeping the text readable.
  • Use $gsap-scrolltrigger-storytelling to add cleanup for ScrollTriggers in this React product tour component.
Use $gsap-scrolltrigger-storytelling to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included reference.

What does the skill need to run?

The skill needs the GSAP library with the ScrollTrigger plugin, because the guidance depends on it and will not work without it. It also needs a web project, either plain HTML, CSS and JavaScript or React.

The skill runs no scripts and uses no network access, according to its package description. It is a set of instructions for the agent, not an executable tool.

  • GSAP library with the ScrollTrigger plugin
  • A web project in HTML/CSS/JavaScript, optionally React
  • Runs scripts: no
  • Uses network: no

Use the demo as a reference

The package includes demo/index.html, which the demo prompts treat as the visual and interaction reference. Point the agent at it when you want a result with a similar finish, and say which parts to keep and which to change.

demo/source.json is also included. Check the demo files and your own copy and content before shipping, since the agent's output will reflect whatever you give it.

  • Reference the included demo/index.html when asking for a similar visual finish
  • Use demo/PROMPT.md as a starting point for your own brief

Safety notes before you ship

Because the skill runs no scripts and makes no network calls, the risk comes from the code the agent writes into your project. Review that code like any other change, especially if you load GSAP from a CDN or add third-party assets.

Pinned sections can trap readers. The skill itself warns against overuse, so check the page on a phone and with reduced-motion settings before release.

  • Review generated code before merging
  • Confirm the GSAP and ScrollTrigger files you load come from a source you trust
  • Test scrolling on small screens and check that text and CTAs stay visible

Tips for better results

Name the story beats you want, one per scroll segment. The skill is built around each segment revealing a new product state, feature layer, data view or workflow step, so a clear list of beats gives the agent something concrete to map to timeline labels.

Tune the feel with the knobs the skill describes: pin duration, scrub style (direct for technical walkthroughs, eased for a cinematic film feel), and how many micro-reveals each section gets. Ask for fewer effects on narrative sections where the copy should carry the moment.

  • List one story beat per section, with the UI state it reveals
  • Ask for direct scrub for technical walkthroughs and eased scrub for cinematic pages
  • Ask for a responsive version with simpler motion on small screens
  • Ask the agent to refresh ScrollTrigger after images or fonts load if section heights shift

What people use it for

  • A product launch page where each scroll segment reveals one feature with a screenshot or UI panel.
  • A standalone responsive HTML concept for a product presentation, built from a reference demo.
  • A React product tour where ScrollTriggers are created with gsap.context() and cleaned up on unmount.
  • A workflow walkthrough where pinned frames step through the stages of a process.
  • A designer's cinematic concept for a product launch, used to test motion direction before development.

Frequently asked questions

How do I install the gsap-scrolltrigger-storytelling skill?

Download the ZIP from this page and unzip the skill folder into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.

What does the gsap-scrolltrigger-storytelling skill require?

It requires the GSAP library with the ScrollTrigger plugin and a web project in HTML/CSS/JavaScript, optionally React. Without GSAP and ScrollTrigger, the guidance will not work.

Is the GSAP ScrollTrigger storytelling skill free?

The skill is listed under the MIT licence. Check the licence file in the repository for the exact terms before reusing it in a commercial project.

Does the skill run scripts or access the network?

According to its listing, the skill runs no scripts and uses no network access. It is a set of instructions for the agent, so review the code the agent produces before shipping it.

Is this skill a good choice for a simple static marketing site?

No. The skill is designed for scroll-driven narratives and would add unnecessary complexity to a simple static site. A plain layout is a better fit there.

Why does my pinned section feel slow or broken?

Pinned sections can make a page feel stuck if they are too long or too frequent. Shorten the pin duration, reduce the number of reveals, and test scrolling on a phone.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

This skill suits front-end developers and designers who want a pinned, scroll-driven product page built on GSAP ScrollTrigger, and teams already using GSAP who want consistent patterns. It is a poor fit for simple static sites, projects that cannot load GSAP, or pages where readers need fast access to content.

Download the skill