gsap-framer-scroll-animation

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 "anim

35,979stars4,449forksUpdated 7/1/2026

Web Development #frontend #gsap #react #animation #framer-motion #javascript

Security Assessment

Safe(100/100)

Security Score100/100

About gsap-framer-scroll-animation

A practical guide for building scroll-driven animations in vanilla JS, React, or Next.js, covering GSAP ScrollTrigger and Framer Motion / Motion v12. It applies to a wide range of scroll effects including parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, scroll progress bars, and entrance animations, and it also targets GitHub Copilot prompt patterns for generating GSAP or Framer Motion code.

A quick library selector recommends GSAP for vanilla JS, Webflow, Vue, pinning, horizontal scroll, and complex timelines, and Framer Motion for React or Next.js declarative work and whileInView entrance animations. Setup instructions install gsap and register the ScrollTrigger plugin before use, and install the motion package (the new name since mid-2025, with framer-motion still valid) importing from motion/react. The workflow is to interpret intent to pick the right library, read the relevant reference file, suggest package installation, scaffold the animation structure in the requested format, and apply the correct tools for scrolling versus in-view elements while keeping accessibility options present and avoiding infinite re-renders. Five common patterns are shown inline: fade-in on enter in both GSAP and Framer, scrub or scroll-linked motion in both, and a pinned GSAP timeline.

Critical rules are emphasized: always register the ScrollTrigger plugin, use ease: 'none' when scrub is active, use useGSAP from @gsap/react instead of plain useEffect in React so ScrollTriggers auto-clean, add markers during development and remove them for production, feed useTransform output into the style prop of a motion element, add 'use client' in Next.js files using motion hooks, animate only transform and opacity, and always check prefers-reduced-motion. Full recipes and Copilot prompts live in reference files for GSAP and Framer, and the skill pairs with a premium-frontend-ui skill that supplies the creative philosophy and design-level polish for when and why to animate.

FAQ

Which library should I use, GSAP or Framer Motion?

The selector suggests GSAP for vanilla JS, Webflow, Vue, pinning, horizontal scroll, and complex timelines, and Framer Motion for React or Next.js declarative style and whileInView entrance animations.

What setup is required for GSAP ScrollTrigger?

Install gsap, then import ScrollTrigger and call gsap.registerPlugin(ScrollTrigger) before any ScrollTrigger usage. This registration is listed as a critical rule to always apply.

How should I integrate GSAP with React?

Use useGSAP from @gsap/react rather than plain useEffect, because it automatically cleans up ScrollTriggers. During development you can add markers: true and remove them before production.

What does the skill say about accessibility?

It instructs you to always check prefers-reduced-motion, and to keep accessibility options present in the animation scaffold, with specific patterns provided in each reference file.

Which properties are safe to animate for performance?

The rules advise animating only transform and opacity, and avoiding width, height, and box-shadow. For scrub animations it also requires ease: 'none' since easing feels wrong when scrub is active.