98.8K+Download
Skip to the usage guide
gsap-framer-scroll-animationby GitHub

GSAP Framer Scroll Animation Skill.

A Claude Code and Codex skill for motion and video: parallax, pinned sections, horizontal scroll, and text scroll animations.

  • Motion & Video
  • UI code
Download OpenDesignView usage guide
github/awesome-copilot · skills/gsap-framer-scroll-animation/SKILL.mdSKILL.md
--- name: gsap-framer-scroll-animation description: - 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, … --- ## Quick Library Selector ## Setup (Always Do First) ## Workflow ## The 5 Most Common Scroll Patterns ## Critical Rules (Apply Always) ## Copilot Prompting Tips
Front matter and section headings read from the upstream file on 2026-09-14 · 6,365 characters in full

01 What it does

What the gsap-framer-scroll-animation Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill implements production-grade scroll animations using GSAP ScrollTrigger and Framer Motion. It covers parallax effects, scroll-triggered reveals, pinned sections, horizontal scroll, and text animations for vanilla JavaScript, React, and Next.js projects. The skill includes a Quick Library Selector to choose between GSAP (for vanilla JS, Webflow, Vue, pinning, and complex timelines) and Framer Motion (for React/Next.js declarative style).

It provides ready-to-use code recipes, full API references in separate reference files, and Copilot prompting patterns. The skill pairs with the premium-frontend-ui skill, which provides the creative philosophy and design principles that guide when and why to animate.

What it produces

  • Production-grade scroll animations with ready-to-use code recipes
See the example prompt ↗

How It Works

  1. 01
    Interpret Intent and Choose Library

    The skill first identifies whether GSAP or Framer Motion is the best fit based on the user's request and project context.

  2. 02
    Read Reference Documentation

    The relevant reference document in the references directory is consulted for detailed APIs and implementation patterns.

  3. 03
    Suggest Package Installation

    The required npm packages are suggested if they are not already present in the project.

  4. 04
    Implement Animation Scaffold

    The animation structure is scaffolded in the requested format, whether React components, hooks, or vanilla JavaScript.

  5. 05
    Apply Tools with Accessibility

    The correct scrolling or in-view tools are applied, ensuring accessibility options are present and hooks do not cause infinite re-renders.

02 Find your fit

When to Use the gsap-framer-scroll-animation Skill

Use the gsap-framer-scroll-animation skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Building scroll animations, scroll-triggered reveals, parallax effects, pinned sections, horizontal scroll, or text animations in vanilla JS, React, or Next.js
  • User requests like 'animate on scroll', 'fade in as I scroll', 'make it scroll like Apple', 'parallax effect', 'sticky section', or 'entrance animation'
  • Generating GSAP or Framer Motion code with Copilot prompt patterns

Know the Boundaries

  • Needs GSAPThe SKILL.md names this dependency; the skill does not work without it in your project.

What to Provide

  • Full selector, base image, and scroll rangeCopilot needs the complete selector, base image, and scroll range upfront because vague prompts produce vague code.
  • GSAP-specific parametersFor GSAP implementations, specify the selector, start/end strings, and whether scrub or toggleActions is wanted.
  • Framer Motion-specific parametersFor Framer implementations, specify which hook to use (useScroll vs whileInView), offset values, and what to transform.
  • Exact error messagesWhen asking Copilot to fix issues, paste the exact error message for dramatically better fixes.

03 Inside the skill

Rules the gsap-framer-scroll-animation Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Register ScrollTrigger Plugin First

    GSAP requires calling gsap.registerPlugin(ScrollTrigger) before using any ScrollTrigger features.

  2. Use Ease None with Scrub

    When scrub is active in GSAP, always use ease: 'none' because easing feels wrong when scrubbing.

  3. Use useGSAP in React

    In React, use useGSAP from @gsap/react instead of plain useEffect because it automatically cleans up ScrollTriggers.

  4. Add Markers During Development Only

    GSAP debug markers should be added with markers: true during development but removed before production.

  5. useTransform Output Goes in Style Prop

    Framer Motion useTransform output must be placed in the style prop of a motion.* element, not a plain div.

  6. Add Use Client Directive in Next.js

    Any Next.js file using motion hooks must have 'use client' at the top of the file.

  7. Animate Transform and Opacity Only

    Only animate transform and opacity properties. Avoid animating width, height, or box-shadow for performance.

  8. Check prefers-reduced-motion

    Always check for the prefers-reduced-motion user preference to respect accessibility needs.

04 Put it to work

Install gsap-framer-scroll-animation in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add gsap-framer-scroll-animation to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

Generic skills CLI form for skills/gsap-framer-scroll-animation/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Create a pinned hero section with a parallax background image that scales and fades as I scroll down. The hero should pin for 200% of viewport height, with the image starting at scale 1 and ending at 1.3 while opacity drops to 0. Add a fade-in for the headline text that appears after 30% of the scroll range. Use [hero-background.jpg] as the image source.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Confirm that gsap.registerPlugin(ScrollTrigger) is called before any ScrollTrigger usage

In OpenDesign import gsap-framer-scroll-animation from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
GitHub
Repository
github.com/github/awesome-copilot Branch main
Skill file
skills/gsap-framer-scroll-animation/SKILL.md Content checksum recorded at verification; commit 1899b18
License
MIT From LICENSE.
Repository stars
38,981 GitHub snapshot taken 2026-09-14 for the whole github/awesome-copilot repository, which contains 6 skills in this catalog. Not a rating or usage count for gsap-framer-scroll-animation.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Quick Library SelectorTable mapping use cases to GSAP or Framer Motion based on framework and animation complexity
  2. Setup (Always Do First)Installation commands and required imports for GSAP and Framer Motion with plugin registration
  3. WorkflowFive-step process from interpreting intent to applying tools with accessibility options
  4. The 5 Most Common Scroll PatternsCode snippets for fade-in, scrub, scroll-linked, and pinned timeline patterns in both libraries
  5. Critical Rules (Apply Always)Eight must-follow rules for plugin registration, easing, React hooks, accessibility, and performance
  6. Copilot Prompting TipsHow to structure prompts with full selectors, scroll ranges, and error messages for better code generation
  7. Reference FilesTable listing gsap.md and framer.md with their full API references and recipe contents
  8. Related SkillsLists premium-frontend-ui skill as the creative philosophy companion defining when and why to animate
The Skill's Own Description
“- 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.”

Front-matter description from SKILL.md. The full file is about 6,365 characters. Read the full file on GitHub.

06 Before you install

Questions About the gsap-framer-scroll-animation Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Should I use GSAP or Framer Motion for my project?

Use GSAP for vanilla JS, Webflow, Vue, or when you need pinning, horizontal scroll, or complex timelines. Use Framer Motion for React or Next.js projects with a declarative style, or when you want whileInView entrance animations. Both can coexist in the same Next.js app.

GSAP Framer Scroll Animation

Run gsap-framer-scroll-animation on a Real Motion and Video Task.

Download OpenDesign, import gsap-framer-scroll-animation from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows