Gsap Framer Scroll Animation

GSAP and Framer scroll animation

Choose GSAP ScrollTrigger or Framer Motion/Motion v12 for scroll-driven motion, then implement accessible, performant animation patterns with the correct imports, hooks, cleanup, and reference recipes.

When to invoke

• "Animate this section as I scroll."
• "Build a pinned GSAP ScrollTrigger timeline."
• "Make a Framer Motion scroll progress bar with useScroll."
• "Create parallax or Apple-like scroll effects in Next.js."
• "Generate GitHub Copilot prompts for GSAP or Framer scroll animation code."

Library selector

Prerequisites and context

Install only the library needed by the chosen approach:

npm install gsap
npm install motion
npm install framer-motion

GSAP setup:

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

Framer/Motion v12 setup:

import { motion, useScroll, useTransform, useSpring } from 'motion/react';
// legacy: import { motion } from 'framer-motion'

Progressive disclosure and bundled resources

Read the relevant reference before generating non-trivial code.

Common patterns

Fade-in on enter with GSAP

gsap.from('.card', {
  opacity: 0, y: 50, stagger: 0.15, duration: 0.8,
  scrollTrigger: { trigger: '.card', start: 'top 85%' }
});

Fade-in on enter with Framer Motion

<motion.div
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: '-80px' }}
  transition={{ duration: 0.6 }}
/>

Scrubbed GSAP transform

gsap.to('.hero-img', {
  scale: 1.3, opacity: 0, ease: 'none',
  scrollTrigger: { trigger: '.hero', start: 'top top', end: 'bottom top', scrub: true }
});

Scroll-linked Framer transform

const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
const y = useTransform(scrollYProgress, [0, 1], [0, -100]);
return <motion.div style={{ y }} />;

Pinned GSAP timeline

const tl = gsap.timeline({
  scrollTrigger: { trigger: '.section', pin: true, scrub: 1, start: 'top top', end: '+=200%' }
});
tl.from('.title', { opacity: 0, y: 60 }).from('.img', { scale: 0.85 });

Implementation rules

Compatibility terminology

Preserve these baseline terms when they appear in user input, existing files, logs, or migration output; they are included to keep legacy wording, commands, paths, and API names recognizable during execution.

• /fix
• @workspace
• MUST
• auto-cleans
• cross-reference
• design-level
• in-view
• mid-2025
• re-renders
• ready-to-use
• references/
• scroll-linked

Output template

## Scroll animation implementation

**Status:** implemented | planned | blocked
**Library:** GSAP ScrollTrigger | Framer Motion/Motion v12
**Target:** <vanilla JS | React | Next.js>

### Files changed
| File | Pattern | Notes |
| --- | --- | --- |
| `<path>` | <fade-in/parallax/pinned/progress/horizontal> | <cleanup/accessibility/performance notes> |

### Validation
- Package setup: <present/needed>
- Reduced motion: <handled/not handled>
- Runtime check: <pass/fail/not run>

Quality gate

• The library choice matches the requested framework and animation complexity.
• Required package and imports are present.
• GSAP code registers ScrollTrigger and cleans up React triggers with useGSAP when applicable.
• Framer code uses motion.*, style, and 'use client' when hooks run in Next.js.
• Scrubbed animations use ease: 'none'.
• Motion respects prefers-reduced-motion.
• Animations primarily use transform and opacity.

References

• Author profile