por Juanjo LunaAnimaciones con GSAP y Framer
Crea animaciones al hacer scroll, efectos de paralaje, revelados y secciones fijadas cuando quieres dar movimiento a una web o app. También sirve para animaciones con GSAP ScrollTrigger y Framer Motion en Vanilla JS, React o Next.js.
Descripción original (inglés)
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 "animate on scroll", "fade in as I scroll", "make it scroll like Apple", "parallax effect", "sticky section", "scroll progress bar", or "entrance animation". Also triggers for Copilot prompt patterns for GSAP or Framer Motion code generation. Pairs with the premium-frontend-ui skill for creative philosophy and design-level polish.
Cómo instalarla
Una skill es una carpeta con un fichero SKILL.md. Para instalarla basta con copiar la carpeta gsap-framer-scroll-animation en el sitio donde tu agente busca sus skills.
- Sin terminal: abre la carpeta en GitHub, descárgala y cópiala en la carpeta de tu agente (tabla de abajo).
- Con terminal (macOS, Linux o Git Bash en Windows): elige tu agente y copia los comandos.
git clone --depth 1 https://github.com/github/awesome-copilot.git /tmp/skill-src
mkdir -p ~/.claude/skills
cp -r "/tmp/skill-src/skills/gsap-framer-scroll-animation" ~/.claude/skills/gsap-framer-scroll-animation
rm -rf /tmp/skill-src| Agente | Para todos tus proyectos | Solo un proyecto |
|---|---|---|
| Claude Code | ~/.claude/skills | .claude/skills |
| GitHub Copilot | ~/.copilot/skills | .github/skills |
| Codex | ~/.agents/skills | .agents/skills |
| Gemini CLI | ~/.gemini/skills | .gemini/skills |
Muchos agentes leen también .agents/skills. Reinicia el agente después de instalar. Antes de instalar una skill, revisa su SKILL.md y los scripts que incluya: se ejecutan con tus permisos.
Más skills de github/awesome-copilot
- Conocer un repositorio de código acquire-codebase-knowledge
- Evaluar preparación de repositorios para AgentRC acreadiness-assess
- Generar instrucciones para agentes IA acreadiness-generate-instructions
- Definir políticas de AgentRC acreadiness-policy
- Analizar rendimiento de campañas publicitarias ad-campaign-analyzer
- Añadir comentarios educativos a un archivo add-educational-comments
- Automatizar Adobe Illustrator con scripts adobe-illustrator-scripting
- Diseñar arquitectura de agentes IA agent-architecture
Explicación redactada con ayuda de IA a partir de la descripción original.