skills.rest
marketiv-id
marketiv-idOFFICIAL
Explore all skills by this author →
GitHub

migrate-scroll-to-gsap

Migrates Framer Motion scroll-driven animations to GSAP ScrollTrigger in React TSX components.

Updated Feb 24, 2026
Search Tags:#react#nextjs#gsap#framer-motion#scrolltrigger#usegsap#animation-migration
One-click install
npx skills add https://github.com/marketiv-id/marketiv-web --skill migrate-scroll-to-gsap-marketiv-id
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-scroll-to-gsap
Source: https://github.com/marketiv-id/marketiv-web/tree/main/.github/skills/migrate-scroll-to-gsap
Command: npx skills add https://github.com/marketiv-id/marketiv-web --skill migrate-scroll-to-gsap-marketiv-id

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Scroll-driven animations built with Framer Motion (useScroll, useTransform, whileInView) can cause jank and inconsistency in React/Next.js projects, especially when smooth scrolling libraries like Lenis are active. This Skill converts those scroll animations to GSAP ScrollTrigger with a safe useGSAP pattern while preserving Framer micro-interactions. ## Core Features & Use Cases - Scroll API Detection: Identifies Framer scroll-driven APIs such as useScroll, useTransform, whileInView, and viewport-based reveals that need migration. - Safe GSAP Conversion: Replaces reveal, parallax, and progress behaviors with GSAP ScrollTrigger timelines using a scoped containerRef and useGSAP hook. - Micro-interaction Preservation: Keeps hover, tap, click, and modal transitions on Framer Motion, removing only scroll-driven logic. - Use Case: A Next.js landing page uses whileInView section reveals that stutter under Lenis smooth scroll. Apply this Skill to convert those reveals to ScrollTrigger tweens while leaving button hover animations untouched. ## Quick Start Migrate the scroll animations in components/Hero.tsx from Framer Motion to GSAP ScrollTrigger using useGSAP with a scoped container ref.

Frequently Asked Questions about migrate-scroll-to-gsap

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

FAQPage Schema
How do I migrate Framer Motion scroll animations to GSAP ScrollTrigger?▼

Identify scroll-driven Framer APIs like useScroll, useTransform, and whileInView, then replace them with GSAP tweens or timelines configured with scrollTrigger inside a useGSAP hook scoped to a containerRef. Keep hover and tap micro-interactions on Framer Motion.

How to use useGSAP with ScrollTrigger in Next.js components?▼

Add "use client" at the top of the file, attach a containerRef to the root element, and call useGSAP with { scope: containerRef } so selectors stay scoped. Register ScrollTrigger and define animations inside the useGSAP callback.

Can I use Framer Motion and GSAP together in the same component?▼

Yes. The recommended split is GSAP ScrollTrigger for scroll-driven macro animations and Framer Motion for micro-interactions like hover, tap, click, and local modal transitions. Only the scroll-driven Framer logic should be removed.

Why do Framer Motion scroll animations jank with Lenis smooth scroll?▼

Framer's scroll progress tracking can desynchronize with Lenis's custom scroll loop, causing stutter in parallax and reveal effects. Moving scroll-driven behavior to GSAP ScrollTrigger, which integrates with smooth scrollers, resolves the timing conflicts.

Should whileInView animations always be migrated to ScrollTrigger?▼

By default, whileInView is treated as a scroll-driven macro animation and should be migrated. If a one-to-one visual replacement is difficult, prioritize matching core behavior such as timing, stagger, and trigger points over minor easing details.

Related Skills

Explore More Software Engineering Skills→
patricio0312revpatricio0312rev
5

framer-motion-animator

Build UI animations and micro-interactions in React apps with Framer Motion.

Community
Advanced
WP-CoachingWP-Coaching

framer-motion-animations

Implement scroll-triggered and entrance animations in React using Framer Motion variants.

Official
Intermediate
TOBIASpuchitoTOBIASpuchito

citec-motion-system

Implements scroll animations and reveal motion with GSAP, ScrollTrigger, and Lenis in Astro and React.

Community
Intermediate
andersoncollabandersoncollab

scroll-animations

Implement CSS scroll-driven animations with scroll() and view() timelines.

Community
Intermediate