What is the gsap-framer-scroll-animation skill?
The gsap-framer-scroll-animation skill is a SKILL.md in awesome-copilot with two reference files, 10 GSAP recipes and 8 Framer recipes. It helps your agent pick between ScrollTrigger and Motion, then apply patterns for pinning, scrub, scroll-linked values and reveal on view.
The gsap-framer-scroll-animation skill is a folder in the awesome-copilot repository, written by Utkarsh Patrikar. It covers two scroll animation libraries in one place, so an agent can compare them before writing code.
On the GSAP side it covers ScrollTrigger: pinning, scrub, snap, timelines, horizontal scroll, ScrollSmoother and matchMedia. On the Framer side it covers Motion v12: useScroll, useTransform, useSpring, whileInView and variants.
Choosing a library
A selector table maps each need to a library. As a rule of thumb, GSAP suits pinning, horizontal scroll and complex timelines, while Framer Motion suits React and Next.js with a declarative style. Setup is npm install gsap, or npm install motion.
Five core patterns
- Fade in on scroll with GSAP, and the same effect with Framer.
- Scrub, which ties animation progress to the scrollbar.
- Scroll-linked values in Framer using useScroll and useTransform.
- A pinned timeline in GSAP for multi-step sequences.
Rules the skill insists on
- Use ease none with scrub, so motion tracks the scroll position.
- In React, use useGSAP from @gsap/react, and add use client in Next.js.
- Keep markers true for debugging only, and animate only transform and opacity.
- Honor prefers-reduced-motion.
Who the gsap-framer-scroll-animation skill is for
Best for
- React and Next.js teams deciding between GSAP and Motion.
- Landing pages with pinned sections, horizontal scroll or parallax.
Not for
- Pages with no scroll-driven motion at all.
- Projects that want a full visual direction. The sibling premium-frontend-ui skill covers that.
Use it with UiChemy
The skill generates scroll animation code for your front end. On a WordPress build, UiChemy Composer works as an AI visual editor that writes HTML, CSS and JavaScript inside Elementor or Gutenberg. Click Get Started to try it. Related pages: GSAP React guidance, GSAP timeline and GSAP plugins.
How to install GSAP and Framer Motion Scroll Animation
git clone https://github.com/github/awesome-copilot.gitClone the repository
Run
git clone https://github.com/github/awesome-copilot.git. The skill is in skills/gsap-framer-scroll-animation.Copy the folder with references
Copy skills/gsap-framer-scroll-animation into the place your agent loads skills from. Keep references/gsap.md and references/framer.md next to SKILL.md.
Install the library you choose
Run
npm install gsapand register ScrollTrigger with gsap.registerPlugin(ScrollTrigger), or runnpm install motion. The framer-motion package also works.Ask for a scroll effect
Describe the effect, such as a pinned section or a scroll-linked progress bar, and let the agent apply the selector table.
Check that it loaded
Ask for a scrubbed animation. The generated code should use ease none with scrub, honor prefers-reduced-motion, and leave markers off.
Key features
- Two libraries in one skillGSAP ScrollTrigger and Framer Motion or Motion v12 are covered side by side, so the agent can weigh them for the task.
- Library selector tableA table matches needs such as pinning, complex timelines, React components or whileInView entrances to the library that handles each.
- ScrollTrigger coveragePinning, scrub, snap, timelines, horizontal scroll, ScrollSmoother and matchMedia are all included in the GSAP guidance.
- Motion v12 coverageuseScroll, useTransform, useSpring, whileInView and variants are covered for React scroll-linked animation.
- Five worked patternsFade-in with GSAP, fade-in with Framer, scrub, scroll-linked Framer, and a pinned timeline give the agent concrete starting code.
- GSAP recipe filereferences/gsap.md holds 10 GSAP recipes for the agent to draw on when a task needs more than the core patterns.
- Framer recipe filereferences/framer.md holds 8 Framer Motion recipes, loaded when a React component task needs more detail.
- Critical rulesScrub uses ease none, useGSAP comes from @gsap/react, markers true is for debugging only, and Next.js components need use client.
- Performance and accessibilityAnimate only transform and opacity and honor prefers-reduced-motion. Related page: motion performance fixes.
- Copilot prompting tipsThe skill includes tips for writing prompts that get usable scroll animation from GitHub Copilot, and it pairs with premium-frontend-ui.
Frequently asked questions
What is the gsap-framer-scroll-animation skill?
It is a skill in the awesome-copilot repository, written by Utkarsh Patrikar. It teaches an AI coding agent scroll animation with GSAP ScrollTrigger and Framer Motion, including a library selector, five core patterns, critical rules and two reference files with recipes for each library.
How do I install the gsap-framer-scroll-animation skill?
Clone github/awesome-copilot and copy skills/gsap-framer-scroll-animation, including its references folder, into the place your agent loads skills from. Then install what the project needs with npm install gsap or npm install motion, and ask the agent for a scroll animation.
Should I use GSAP or Framer Motion for scroll animation?
The skill's selector table decides per need. Broadly, GSAP fits pinning, horizontal scroll, complex timelines, vanilla JS, Webflow and Vue, and Framer Motion fits React and Next.js with a declarative style and whileInView entrance animations.
What are the critical rules in this skill?
Use ease none with scrub, use the useGSAP hook from @gsap/react in React, keep markers true for debugging only, add use client in Next.js, animate only transform and opacity, and honor prefers-reduced-motion. The agent is told to follow these on every output.
What does the skill cover for Motion v12?
It covers useScroll, useTransform, useSpring, whileInView and variants. The references/framer.md file adds 8 recipes. Setup is npm install motion, and the older framer-motion package name is mentioned as an alternative.
Does this skill work with Claude Code?
The skill is written for GitHub Copilot, with prompting tips for it. The repository does not state support for Claude Code, Cursor or Codex, though an agent that loads SKILL.md folders may follow it, so verify the behavior on a small test first.
What license covers gsap-framer-scroll-animation?
The awesome-copilot repository reports MIT. The pack shows no separate license field in this skill's SKILL.md, only an author. GSAP and Motion have their own terms, so check them for your project. Related page: high end visual design.