gsap-framer-scroll-animationdi GitHub

GSAP Framer Scroll Animation Skill.

Una skill per Claude Code e Codex per motion e video: parallasse, sezioni fisse, scroll orizzontale e animazioni di testo durante lo scroll.

Motion e video
Codice UI

Scarica OpenDesign Guida all'uso

github/awesome-copilot · skills/gsap-framer-scroll-animation/SKILL.mdSKILL.md

--- name: gsap-framer-scroll-animation description: - 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, … --- ## Quick Library Selector ## Setup (Always Do First) ## Workflow ## The 5 Most Common Scroll Patterns ## Critical Rules (Apply Always) ## Copilot Prompting Tips

Intestazione e sezioni lette dal file originale il 14/09/2026 · 6.365 caratteri in totale

01 Cosa fa

Cosa fa la skill gsap-framer-scroll-animation in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Questa skill implementa animazioni di scroll di livello produzione utilizzando GSAP ScrollTrigger e Framer Motion. Copre effetti parallax, reveal attivati dallo scroll, sezioni pinnate, scroll orizzontale e animazioni di testo per progetti in JavaScript vanilla, React e Next.js. La skill include un Quick Library Selector per scegliere tra GSAP (per JS vanilla, Webflow, Vue, pinning e timeline complesse) e Framer Motion (per lo stile dichiarativo React/Next.js).

Fornisce ricette di codice pronte all'uso, riferimenti API completi in file di reference separati e pattern di prompting per Copilot. La skill si abbina alla skill premium-frontend-ui, che fornisce la filosofia creativa e i principi di design che guidano quando e perché animare.

Che cosa produce

Animazioni di scroll di livello produzione con ricette di codice pronte all'uso

Vedi l'esempio di prompt ↗

Come funziona

01
Interpretare l'Intento e Scegliere la Libreria
La skill identifica innanzitutto se GSAP o Framer Motion sia la scelta migliore in base alla richiesta dell'utente e al contesto del progetto.
02
Leggere la Documentazione di Riferimento
Il documento di riferimento pertinente nella directory references viene consultato per le API dettagliate e i pattern di implementazione.
03
Suggerire l'Installazione dei Package
I package npm richiesti vengono suggeriti se non sono già presenti nel progetto.
04
Implementare lo Scaffold dell'Animazione
La struttura dell'animazione viene scaffoldata nel formato richiesto, che si tratti di componenti React, hook o JavaScript vanilla.
05
Applicare gli Strumenti con Accessibilità
Vengono applicati gli strumenti corretti per lo scroll o per la rilevazione della visibilità, assicurando che siano presenti le opzioni di accessibilità e che gli hook non causino re-render infiniti.

02 Trova la tua applicazione

Quando usare la skill gsap-framer-scroll-animation

Usa la skill gsap-framer-scroll-animation in Claude Code o Codex quando il lavoro riguarda motion e video di questo tipo. Ambito e limiti qui sotto sono tratti dal file della skill stessa.

Buona applicazione

Creazione di animazioni di scroll, reveal attivati dallo scroll, effetti parallax, sezioni pinnate, scroll orizzontale o animazioni di testo in JS vanilla, React o Next.js
Richieste dell'utente come 'anima allo scroll', 'dissolvenza in entrata durante lo scroll', 'fallo scorrere come Apple', 'effetto parallax', 'sezione sticky' o 'animazione di ingresso'
Generazione di codice GSAP o Framer Motion con i pattern di prompt di Copilot

Conosci i limiti

Richiede GSAPIl SKILL.md indica questa dipendenza; la skill non funziona senza di essa nel progetto.

Cosa fornire

Selettore completo, immagine base e intervallo di scrollCopilot ha bisogno del selettore completo, dell'immagine base e dell'intervallo di scroll fin dall'inizio, perché prompt vaghi producono codice vago.
Parametri specifici di GSAPPer le implementazioni GSAP, specificare il selettore, le stringhe start/end e se si desidera scrub o toggleActions.
Parametri specifici di Framer MotionPer le implementazioni Framer, specificare quale hook usare (useScroll oppure whileInView), i valori di offset e cosa trasformare.
Messaggi di errore esattiQuando si chiede a Copilot di risolvere problemi, incollare il messaggio di errore esatto per correzioni molto più efficaci.

03 Dentro la skill

Regole che lo skill gsap-framer-scroll-animation fornisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Registrare prima il plugin ScrollTrigger
GSAP richiede di chiamare gsap.registerPlugin(ScrollTrigger) prima di utilizzare qualsiasi funzionalità di ScrollTrigger.
Usare ease none con scrub
Quando scrub è attivo in GSAP, usare sempre ease: 'none' perché l'easing risulta innaturale durante lo scrubbing.
Usare useGSAP in React
In React, usare useGSAP da @gsap/react invece del semplice useEffect perché pulisce automaticamente i ScrollTrigger.
Aggiungere i marker solo in fase di sviluppo
I marker di debug di GSAP devono essere aggiunti con markers: true durante lo sviluppo, ma rimossi prima della produzione.
L'output di useTransform va nella prop style
L'output di useTransform di Framer Motion deve essere collocato nella prop style di un elemento motion.*, non in un div semplice.
Aggiungere la direttiva use client in Next.js
Qualsiasi file Next.js che utilizza hook motion deve avere 'use client' in cima al file.
Anima Solo Transform e Opacity
Animare solo le proprietà transform e opacity. Evitare di animare width, height o box-shadow per motivi di performance.
Verificare prefers-reduced-motion
Verificare sempre la preferenza utente prefers-reduced-motion per rispettare le esigenze di accessibilità.

04 Mettila al lavoro

Installa gsap-framer-scroll-animation in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi gsap-framer-scroll-animation a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

Forma generica del comando CLI skills per skills/gsap-framer-scroll-animation/SKILL.md; il repository potrebbe documentare un proprio percorso.

Dai alla Skill un Primo Compito di Motion e Video

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Create a pinned hero section with a parallax background image that scales and fades as I scroll down. The hero should pin for 200% of viewport height, with the image starting at scale 1 and ending at 1.3 while opacity drops to 0. Add a fade-in for the headline text that appears after 30% of the scroll range. Use [hero-background.jpg] as the image source.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Confermare che gsap.registerPlugin(ScrollTrigger) venga chiamato prima di qualsiasi utilizzo di ScrollTrigger

In OpenDesign importare gsap-framer-scroll-animation dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi selezionarlo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
File della skill: skills/gsap-framer-scroll-animation/SKILL.md Checksum contenuto registrato alla verifica; commit 1899b18
License: MIT Da LICENSE.
Stelle del repository: 38.981 Snapshot GitHub del 2026-09-14 per l'intero repository github/awesome-copilot, che contiene 6 skill in questo catalogo. Non è un punteggio o conteggio utilizzo per gsap-framer-scroll-animation.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Selettore Rapido della LibreriaTabella che mappa i casi d'uso su GSAP o Framer Motion in base al framework e alla complessità dell'animazione
Configurazione (Da Fare Sempre Prima)Comandi di installazione e import richiesti per GSAP e Framer Motion con registrazione dei plugin
WorkflowProcesso in cinque fasi dall'interpretazione dell'intento all'applicazione degli strumenti con opzioni di accessibilità
I 5 Pattern di Scroll Più ComuniSnippet di codice per i pattern fade-in, scrub, scroll-linked e pinned timeline in entrambe le librerie
Regole Critiche (Da Applicare Sempre)Otto regole imprescindibili per la registrazione dei plugin, l'easing, gli hook React, l'accessibilità e le performance
Suggerimenti per il Prompting con CopilotCome strutturare i prompt con selettori completi, intervalli di scroll e messaggi di errore per una generazione di codice migliore
File di RiferimentoTabella che elenca gsap.md e framer.md con i rispettivi riferimenti API completi e contenuti delle ricette
Skill CorrelateElenca la skill premium-frontend-ui come complemento sulla filosofia creativa che definisce quando e perché animare

Descrizione della skill

"- Usa questa skill ogni volta che l'utente vuole creare animazioni di scroll, effetti di scorrimento, parallasse, reveal attivati dallo scroll, sezioni ancorate, scroll orizzontale, animazioni di testo o qualsiasi movimento legato alla posizione di scroll — in vanilla JS, React o Next.js. Copre GSAP ScrollTrigger (pinning, scrubbing, snapping, timeline, scroll orizzontale, ScrollSmoother, matchMedia) e Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Usa questa skill anche se l'utente dice semplicemente "animare allo scroll", "dissolvenza in entrata mentre scorri", "fallo scorrere come Apple", "effetto parallasse", "sezione appiccicosa", "barra di avanzamento scroll" o "animazione di entrata". Si attiva anche per i pattern di prompt Copilot per la generazione di codice GSAP o Framer Motion. Si abbina alla skill premium-frontend-ui per la filosofia creativa e la rifinitura a livello di design."

Descrizione front-matter da SKILL.md. Il file completo è di circa 6.365 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande Sulla Skill gsap-framer-scroll-animation

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Dovrei usare GSAP o Framer Motion per il mio progetto?

Usi GSAP per JS vanilla, Webflow, Vue, o quando ha bisogno di pinning, scroll orizzontale o timeline complesse. Usi Framer Motion per progetti React o Next.js con uno stile dichiarativo, o quando desidera animazioni di ingresso whileInView. Entrambi possono coesistere nella stessa app Next.js.

GSAP Framer Scroll Animation

Eseguire gsap-framer-scroll-animation su un compito reale di motion e video.

Scarica OpenDesign, importa gsap-framer-scroll-animation dal suo link SKILL.md, incolla il prompt sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

Cosa fa la skill gsap-framer-scroll-animation in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando usare la skill gsap-framer-scroll-animation

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che lo skill gsap-framer-scroll-animation fornisce a Claude Code e Codex

Registrare prima il plugin ScrollTrigger

Usare ease none con scrub

Usare useGSAP in React

Aggiungere i marker solo in fase di sviluppo

L'output di useTransform va nella prop style

Aggiungere la direttiva use client in Next.js

Anima Solo Transform e Opacity

Verificare prefers-reduced-motion