skills.rest
github
githubOFFICIAL
Explore all skills by this author →
WebsiteGitHub

gsap-framer-scroll-animation

Implements scroll-driven animations using GSAP ScrollTrigger and Framer Motion in vanilla JS, React, and Next.js.

38.5k|4.9k|Updated Jun 11, 2025
Search Tags:#next.js#parallax#GSAP#scrolltrigger#framer motion#scroll animation#reAct
One-click install
npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-framer-scroll-animation
Source: https://github.com/github/awesome-copilot/tree/main/skills/gsap-framer-scroll-animation
Command: npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, @gsap/react, motion, framer-motion, lenis, split-type, and includes references (resource) components.

What problem does it solve?

Building scroll-driven animations like parallax, pinned sections, and scroll-triggered reveals requires deep knowledge of GSAP ScrollTrigger and Framer Motion APIs, and small mistakes (missing plugin registration, wrong easing for scrub, missing 'use client' directives) silently break animations.

Core Features & Use Cases

  • Dual-library coverage: Provides recipes and API references for both GSAP ScrollTrigger (pinning, scrubbing, snapping, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants).
  • Ready-to-use recipes: Includes 18 complete recipes with Copilot prompts, covering fade-in reveals, parallax layers, pinned timelines, horizontal scroll sections, progress bars, staggered grids, and text animations.
  • Use Case: A developer building a Next.js landing page asks for an Apple-style scroll experience; the skill selects the right library, scaffolds a pinned GSAP timeline or Framer Motion scroll-linked transform, and applies accessibility guards for prefers-reduced-motion.

Quick Start

Ask Copilot to build a scroll-triggered fade-in animation for your React component and specify whether you prefer GSAP or Framer Motion.

Frequently Asked Questions about gsap-framer-scroll-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a scroll-triggered fade-in animation in React?▼

Use Framer Motion's whileInView prop with initial opacity 0 and y offset, or GSAP's ScrollTrigger with a from tween. Framer Motion is the declarative fit for React, while GSAP suits complex timelines and pinning.

GSAP vs Framer Motion for scroll animations, which should I use?▼

Use GSAP for vanilla JS, pinning, horizontal scroll, and complex scrubbed timelines. Use Framer Motion for React and Next.js projects with declarative entrance animations via whileInView. Both can coexist in one Next.js app.

Why is my GSAP ScrollTrigger animation not working?▼

The most common cause is missing gsap.registerPlugin(ScrollTrigger) before any ScrollTrigger usage. In React, also replace useEffect with useGSAP from @gsap/react so triggers are cleaned up on unmount.

Does Framer Motion work with Next.js App Router?▼

Yes, but every file using motion components or hooks like useScroll must include 'use client' at the top. Keep motion components in separate client files and import them into Server Components.

How do I make scroll animations accessible for reduced motion?▼

Check prefers-reduced-motion before animating. Framer Motion provides the useReducedMotion hook, while GSAP projects can use gsap.matchMedia with a prefers-reduced-motion condition to skip or simplify animations.

Related Skills

Explore More Software Engineering Skills→
vadimcomanescuvadimcomanescu
24

frontend-design

Create token-driven frontend interfaces for Next.js App Router, React, and vanilla HTML/CSS/JS.

Community
Advanced
dhruvil7797dhruvil7797

optimize

Optimize front-end UI performance to improve Core Web Vitals metrics.

Community
Advanced
mewomewoliumewomewoliu
1

motion-designer

Define motion character, timing vocabulary, and easing curves for brand-aligned UI animations.

Community
Advanced
MediaAskeyDOJOMediaAskeyDOJO

scroll-experience

Design scroll-driven web experiences with GSAP ScrollTrigger, Framer Motion, and CSS scroll-timeline.

Community
Advanced