gsap-framer-scroll-animationpor GitHub

GSAP Framer Scroll Animation Skill.

Un skill de Claude Code y Codex para movimiento y video: parallax, secciones fijas, scroll horizontal y animaciones de texto con scroll.

Movimiento y video
Código UI

Descargar OpenDesign Ver guía de 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

Encabezado y títulos de sección leídos del archivo original el 14/09/2026 · 6365 caracteres completos

01 Qué hace

Qué hace la skill gsap-framer-scroll-animation en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Esta skill implementa animaciones de scroll de nivel de producción usando GSAP ScrollTrigger y Framer Motion. Cubre efectos de parallax, revelados activados por scroll, secciones fijadas (pinned), scroll horizontal y animaciones de texto para proyectos de JavaScript vanilla, React y Next.js. La skill incluye un Quick Library Selector para elegir entre GSAP (para JS vanilla, Webflow, Vue, pinning y timelines complejas) y Framer Motion (para el estilo declarativo de React/Next.js).

Proporciona recetas de código listas para usar, referencias completas de API en archivos de referencia separados, y patrones de prompting para Copilot. La skill se combina con la skill premium-frontend-ui, que aporta la filosofía creativa y los principios de diseño que guían cuándo y por qué animar.

Qué produce

Animaciones de scroll de nivel de producción con recetas de código listas para usar

Ver el ejemplo de prompt ↗

Cómo funciona

01
Interpretar la Intención y Elegir la Librería
La skill primero identifica si GSAP o Framer Motion es la mejor opción según la solicitud del usuario y el contexto del proyecto.
02
Leer la Documentación de Referencia
Se consulta el documento de referencia correspondiente en el directorio references para obtener las API detalladas y los patrones de implementación.
03
Sugerir la Instalación de Paquetes
Se sugieren los paquetes npm necesarios si aún no están presentes en el proyecto.
04
Implementar el Andamiaje de la Animación
La estructura de la animación se genera en el formato solicitado, ya sean componentes de React, hooks o JavaScript vanilla.
05
Aplicar Herramientas con Accesibilidad
Se aplican las herramientas correctas de scroll o de detección de visibilidad, asegurando que existan opciones de accesibilidad y que los hooks no provoquen re-renderizados infinitos.

02 Encuentra tu caso de uso

Cuándo usar el skill gsap-framer-scroll-animation

Usa el skill gsap-framer-scroll-animation en Claude Code o Codex cuando el trabajo sea movimiento y video de este tipo. El ajuste y los límites a continuación se toman del propio archivo del skill.

Buen caso de uso

Creación de animaciones de scroll, revelados activados por scroll, efectos de parallax, secciones fijadas, scroll horizontal o animaciones de texto en JS vanilla, React o Next.js
Solicitudes de usuario como 'animar al hacer scroll', 'aparecer con fade al desplazarme', 'que se desplace como Apple', 'efecto parallax', 'sección sticky' o 'animación de entrada'
Generación de código GSAP o Framer Motion con patrones de prompt de Copilot

Conozca los límites

Requiere GSAPEl SKILL.md declara esta dependencia; el skill no funciona sin ella en tu proyecto.

Qué proporcionar

Selector completo, imagen base y rango de scrollCopilot necesita el selector completo, la imagen base y el rango de scroll de antemano, porque los prompts vagos producen código vago.
Parámetros específicos de GSAPPara implementaciones con GSAP, especifique el selector, las cadenas start/end, y si se desea scrub o toggleActions.
Parámetros específicos de Framer MotionPara implementaciones con Framer, especifique qué hook usar (useScroll vs whileInView), los valores de offset y qué transformar.
Mensajes de error exactosAl pedirle a Copilot que corrija problemas, pegue el mensaje de error exacto para obtener correcciones mucho mejores.

03 Dentro del skill

Reglas que el skill gsap-framer-scroll-animation le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Registre primero el plugin ScrollTrigger
GSAP requiere llamar a gsap.registerPlugin(ScrollTrigger) antes de usar cualquier función de ScrollTrigger.
Use ease none con scrub
Cuando scrub está activo en GSAP, use siempre ease: 'none', porque el easing se siente incorrecto al hacer scrub.
Use useGSAP en React
En React, use useGSAP de @gsap/react en lugar de un useEffect normal, porque limpia automáticamente los ScrollTriggers.
Agregue markers solo durante el desarrollo
Los markers de depuración de GSAP deben agregarse con markers: true durante el desarrollo, pero eliminarse antes de producción.
La salida de useTransform va en la prop style
La salida de useTransform de Framer Motion debe colocarse en la prop style de un elemento motion.*, no en un div normal.
Agregue la directiva use client en Next.js
Cualquier archivo de Next.js que use hooks de motion debe tener 'use client' al principio del archivo.
Anime Solo Transform y Opacity
Anime solo las propiedades transform y opacity. Evite animar width, height o box-shadow por motivos de rendimiento.
Verifique prefers-reduced-motion
Verifique siempre la preferencia del usuario prefers-reduced-motion para respetar las necesidades de accesibilidad.

04 Ponlo a trabajar

Instala gsap-framer-scroll-animation en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agrega gsap-framer-scroll-animation a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Forma genérica de la CLI skills para skills/gsap-framer-scroll-animation/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una Primera Tarea de Motion y Video

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

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.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Confirme que gsap.registerPlugin(ScrollTrigger) se llama antes de cualquier uso de ScrollTrigger

En OpenDesign importe gsap-framer-scroll-animation desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: GitHub
Repository: github.com/github/awesome-copilot Rama main
Archivo de skill: skills/gsap-framer-scroll-animation/SKILL.md Checksum de contenido registrado en la verificación; commit 1899b18
License: MIT De LICENSE.
Estrellas del repositorio: 38,981 Instantánea de GitHub tomada el 2026-09-14 para todo el repositorio github/awesome-copilot, que contiene 6 skills en este catálogo. No es una calificación ni un conteo de uso para gsap-framer-scroll-animation.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Selector Rápido de LibreríaTabla que asigna casos de uso a GSAP o Framer Motion según el framework y la complejidad de la animación
Configuración (Siempre Primero)Comandos de instalación e imports necesarios para GSAP y Framer Motion con registro de plugins
Flujo de TrabajoProceso de cinco pasos desde la interpretación de la intención hasta la aplicación de herramientas con opciones de accesibilidad
Los 5 Patrones de Scroll Más ComunesFragmentos de código para patrones de fade-in, scrub, scroll-linked y timeline anclado en ambas librerías
Reglas Críticas (Aplicar Siempre)Ocho reglas obligatorias para registro de plugins, easing, hooks de React, accesibilidad y rendimiento
Consejos para Prompts de CopilotCómo estructurar prompts con selectores completos, rangos de scroll y mensajes de error para una mejor generación de código
Archivos de ReferenciaTabla que lista gsap.md y framer.md con sus referencias completas de API y contenido de recetas
Skills RelacionadosEnumera el skill premium-frontend-ui como el complemento de filosofía creativa que define cuándo y por qué animar

La descripción propia del Skill

"- Usa este skill siempre que el usuario quiera construir animaciones de scroll, efectos de scroll, parallax, revelaciones activadas por scroll, secciones fijas, scroll horizontal, animaciones de texto o cualquier movimiento vinculado a la posición de scroll — en vanilla JS, React o Next.js. Cubre GSAP ScrollTrigger (fijado, scrubbing, snapping, timelines, scroll horizontal, ScrollSmoother, matchMedia) y Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Usa este skill incluso si el usuario solo dice "animar al hacer scroll", "que aparezca mientras hago scroll", "que se desplace como Apple", "efecto parallax", "sección fija", "barra de progreso de scroll" o "animación de entrada". También se activa con patrones de prompt de Copilot para generación de código GSAP o Framer Motion. Se complementa con el skill premium-frontend-ui para filosofía creativa y refinamiento de diseño."

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 6,365 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill gsap-framer-scroll-animation

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Debería usar GSAP o Framer Motion para mi proyecto?

Use GSAP para JS vanilla, Webflow, Vue, o cuando necesite pinning, scroll horizontal o timelines complejos. Use Framer Motion para proyectos de React o Next.js con un estilo declarativo, o cuando quiera animaciones de entrada whileInView. Ambos pueden coexistir en la misma aplicación de Next.js.

GSAP Framer Scroll Animation

Ejecutar gsap-framer-scroll-animation en una tarea real de motion y video.

Descarga OpenDesign, importa gsap-framer-scroll-animation desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills

Terminal

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

Qué hace la skill gsap-framer-scroll-animation en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo usar el skill gsap-framer-scroll-animation

Buen caso de uso

Conozca los límites

Qué proporcionar

Reglas que el skill gsap-framer-scroll-animation le da a Claude Code y Codex

Registre primero el plugin ScrollTrigger

Use ease none con scrub

Use useGSAP en React

Agregue markers solo durante el desarrollo

La salida de useTransform va en la prop style

Agregue la directiva use client en Next.js

Anime Solo Transform y Opacity

Verifique prefers-reduced-motion