ClaudSkills / General / design-creative

Gsap Framer Scroll Animation

Category: General  ·  Sub-category: design-creative  ·  Last updated:
Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use this skill even if the user just says "animate on scroll", "fade in as I scroll", "make it scroll like Apple", "parallax effect", "sticky section", "scroll progress bar", or "entrance animation". Also triggers for Copilot prompt patterns for GSAP or Framer Motion code generation. Pairs with the premium-frontend-ui skill for creative philosophy and design-level polish.

From the source SKILL.md

Production-grade scroll animations with GitHub Copilot prompts, ready-to-use code recipes, and deep API references.

What this skill does

Gsap Framer Scroll Animation is a community-contributed Claude Code skill in the design-creative sub-category. It ships as a SKILL.md file that Claude Code auto-discovers under ~/.claude/skills/gsap-framer-scroll-animation/ and loads when your prompt matches the skill's trigger.

Who uses this skill

The Gsap Framer Scroll Animation skill is built for Claude Code users and developers across all disciplines looking for general-purpose AI assistance. It is part of the open ClaudSkills registry, a community-curated catalog of 56,000+ capabilities you can install for Claude Code — the Claude CLI agent.

How to install

Free

Manual install (2 steps)

mkdir -p ~/.claude/skills/gsap-framer-scroll-animation
curl -L https://claudskills.com/skills/gsap-framer-scroll-animation/SKILL.md \
  -o ~/.claude/skills/gsap-framer-scroll-animation/SKILL.md

Or just download SKILL.md directly and drop it into ~/.claude/skills/gsap-framer-scroll-animation/. Claude Code auto-discovers it on next session.

Skills live at ~/.claude/skills/gsap-framer-scroll-animation/SKILL.md on macOS/Linux, or %USERPROFILE%\.claude\skills\gsap-framer-scroll-animation\SKILL.md on Windows. See the full install guide for step-by-step instructions.

Pro

One-click install via the desktop app

The ClaudSkills desktop app installs any skill directly into ~/.claude/skills/ with one click — no terminal required. Pro starts at $9/mo or $149 lifetime.

Pro

For the full experience including quality scoring and one-click install features for each skill — upgrade to Pro.

More General skills

Browse all General skills in the ClaudSkills registry, or explore these other picks from the same category:

Browse all General skills → Top 100 skills
Part of ClaudSkills — the open registry for Claude Code skills.  ·  What's New  ·  Install guide  ·  About  ·  llms.txt

Part of Acreator Store — Adam Lankamer's AI tools: GifPerfect · AspectPerfect · SlomoPerfect · Ucaption · UTagger · AutoXPoster · TestYourSkills