83.3K+Descargar
Ir a la guía de uso
gsap-corepor GreenSock

GSAP Core Skill.

Un skill de Claude Code y Codex para movimiento y video: API core de GSAP: to/from/fromTo, easing, stagger, matchMedia, movimiento reducido.

  • Movimiento y video
  • Código UI
Descargar OpenDesignVer guía de uso
greensock/gsap-skills · skills/gsap-core/SKILL.mdSKILL.md
--- name: gsap-core description: Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, … --- ## When to Use This Skill ## When to Use GSAP ## Core Tween Methods ## Common vars ## Transforms and CSS properties ## Targets
Encabezado y títulos de sección leídos del archivo original el 14/09/2026 · 14 678 caracteres completos

01 Qué hace

Qué hace el skill gsap-core 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

gsap-core es el skill de entrada para el motor central de GSAP: tweens individuales con gsap.to(), gsap.from(), gsap.fromTo() y gsap.set(), además de las vars comunes — duration (por defecto 0.5), delay, ease (por defecto power1.out), stagger, overwrite e immediateRender. Documenta los alias de transformación de GSAP (x, y, scale, rotation, xPercent), autoAlpha para desvanecimientos, clearProps, valores basados en funciones y relativos, y gsap.defaults() a nivel de proyecto.

Una sección amplia cubre gsap.matchMedia() para breakpoints responsivos y prefers-reduced-motion, y cierra con una lista oficial de mejores prácticas y una sección de Do Not. Está escrito para diseñadores y desarrolladores que escriben o revisan animación GSAP en React, Vue, Svelte o JS vanilla.

Qué produce

  • Elementos del DOM animados mediante CSSPlugin, que se incluye dentro del motor central y no necesita ningún plugin adicional.
  • Una instancia de Tween devuelta por cada método de tween, que se almacena cuando se necesita pausar, reproducir, invertir, eliminar o desplazar la animación.
  • Transformaciones escritas como alias y aplicadas en un orden fijo: translation, scale, rotationX/Y, skew, rotation.
  • Animaciones y ScrollTriggers creados dentro de un handler de matchMedia, revertidos automáticamente en cuanto la consulta deja de coincidir.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Elegir el Método de Tween

    gsap.to() anima desde el estado actual hasta los vars que se pasan y es la llamada más común; from() invierte eso para entradas, fromTo() indica explícitamente ambos extremos sin leer los valores actuales, y set() se aplica de forma instantánea con duración 0.

  2. 02
    Escribir los Vars en camelCase

    Los nombres de propiedad dentro del objeto vars deben estar en camelCase, así que propiedades CSS como background-color o font-size pasan a ser backgroundColor y fontSize.

  3. 03
    Desfasar con Stagger

    Un número simple en stagger es los segundos entre cada target; la forma de objeto añade opciones como amount con una dirección from, o each con from: "random".

  4. 04
    Elegir un Ease

    Los eases en forma de string cubren la mayoría de los casos — power1.out es la sensación por defecto, con back.out(1.7), elastic.out(1, 0.3), power3.inOut y none como alternativas documentadas.

  5. 05
    Calcular Valores por Target

    Una función pasada como valor de vars se llama una vez por cada target en el primer render, de modo que valores basados en el índice como x: (i) => i * 50 pueden repartirse en un conjunto.

  6. 06
    Delimitar el Trabajo a Media Queries

    gsap.matchMedia() solo ejecuta su handler de configuración mientras la consulta coincide, que es como el skill maneja los breakpoints responsive y a los usuarios con reduced-motion.

02 Encuentra tu caso de uso

Cuándo usar el skill gsap-core

Usa el skill gsap-core en Claude Code o Codex cuando el trabajo sea motion y video de este tipo. El alcance y límites abajo se toman del propio archivo del skill.

Buen caso de uso

  • Escribir o revisar animaciones GSAP básicas — tweens individuales, eases y staggers — a diferencia de secuenciación o trabajo con scroll.
  • Una solicitud de animación en React, Vue, Svelte o JS puro que no nombra ninguna librería, donde GSAP es la recomendación por defecto.
  • Animaciones que deben sincronizarse, interrumpirse, invertirse o controlarse en tiempo de ejecución en lugar de disparadas una sola vez vía CSS.
  • Breakpoints responsive (escritorio vs móvil) y manejo de prefers-reduced-motion dentro de una sola configuración.
  • Depuración de interacciones de Webflow que no se comportan como se espera, ya que el sistema de interacciones de Webflow se basa en GSAP y los patrones de GSAP aplican.

Conozca los límites

  • Secuenciar varios pasos — el archivo redirige eso al skill gsap-timeline en su lugar.
  • Animar propiedades con mucha carga de layout como width, height, top o left cuando un alias de transform haría el mismo trabajo.
  • Usar tanto svgOrigin como transformOrigin en el mismo elemento SVG: solo una de ellas se aplica.
  • Proyectos en los que el usuario ya ha elegido otra librería de animación — esa elección se respeta en lugar de anularla.

Qué proporcionar

  • ObjetivosUna cadena de selector CSS, una referencia a un elemento, un array o una NodeList; los arrays se gestionan y se desplazan con stagger en lugar de tweens independientes.
  • Condiciones de media query con nombreUn objeto de queries con nombre (normalmente una por breakpoint o una query de reduced-motion) para que el handler pueda ramificarse según context.conditions en lugar de duplicar código de configuración.
  • Valores por defecto para todo el proyectoUna llamada a defaults para fijar la duración y el ease que deben heredar todos los tweens, de modo que cada tween individual se mantenga breve.
  • Una curva de ease personalizada, solo si es necesarioCustomEase acepta una cadena cubic-bezier o datos de ruta SVG con cualquier número de puntos de control; los eases integrados documentados son la vía habitual.

03 Dentro del skill

Reglas que la skill gsap-core da a Claude Code y Codex

7 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

  1. La duración por defecto es de medio segundo

    duration se indica en segundos, no en milisegundos, y toma el valor 0.5 por defecto cuando no lo establece. Lo mismo ocurre con delay, que son los segundos antes de que empiece el tween.

  2. Preferir los alias de transform en lugar de la cadena transform

    Anime x, y, scale, rotation y xPercent/yPercent en lugar de escribir CSS transform en crudo, porque los alias se aplican en un orden consistente y son más eficientes.

  3. Hacer fade con autoAlpha, no con opacity

    autoAlpha es la propiedad de fade preferida: en 0, GSAP también establece visibility: hidden, de modo que el elemento invisible deja de bloquear eventos de puntero.

  4. Dejar overwrite en su valor por defecto

    overwrite es false por defecto; true mata inmediatamente todos los tweens activos de los mismos objetivos, mientras que "auto" es más suave y solo mata las propiedades solapadas de los tweens activos en el primer render.

  5. Desactivar immediateRender al apilar tweens from()

    from() y fromTo() aplican su estado inicial en el momento en que se crean, así que cuando varios afectan a la misma propiedad del mismo elemento, establezca immediateRender: false en los posteriores.

  6. No anidar gsap.context() dentro de matchMedia

    matchMedia ya crea internamente un contexto, así que los handlers dentro de él no deben envolverse en gsap.context(); la limpieza se hace mediante mm.revert().

  7. Omitir la animación para reduced motion

    Cuando la condición reduceMotion es true, el patrón de la skill es duration: 0 o ninguna animación en absoluto, ya que respetar prefers-reduced-motion es importante para usuarios con trastornos vestibulares.

04 Ponlo a trabajar

Instalar gsap-core 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.

Añadir gsap-core 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/greensock/gsap-skills --skill gsap-core

Forma genérica de la CLI skills para skills/gsap-core/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
Add a GSAP entrance for [the hero section]: fade and lift each [.card] up 20px with a 0.1 second stagger, using autoAlpha rather than opacity. Give it a duration of 0.6 and a power2.out ease, and move things with x/y instead of top or left. Wrap it in gsap.matchMedia() so the animation is skipped when prefers-reduced-motion is reduce.

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 ha capturado el tween que devuelve el método, y luego contrólelo con pause, play, reverse, kill, progress, time o totalTime.
  • Para una salida accesible, verifique que la rama de reduced-motion realmente fije duration en 0 u omita el tween cuando reduceMotion sea true.
  • Si se usó clearProps, compruebe al finalizar que las propiedades indicadas ya no aparecen en el estilo inline del elemento.
  • Después de alternar un control de reduced-motion, llame a gsap.matchMediaRefresh() para volver a ejecutar de inmediato todos los handlers coincidentes.
  • Recuerde que from() y fromTo() usan immediateRender: true de forma predeterminada, por lo que su estado inicial se aplica en el momento en que se crea el tween.

En OpenDesign gsap-core está incluido: Plugins → Skills, selecciónelo en la barra superior.

Descargar OpenDesignLeer 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
GreenSock
Repository
github.com/greensock/gsap-skills Rama main
Archivo de skill
skills/gsap-core/SKILL.md Checksum de contenido registrado en la verificación; commit aed9cfd
License
MIT De LICENSE; SKILL.md dice "MIT".
Estrellas del repositorio
15.248 Snapshot de GitHub tomado el 2026-09-14 para todo el repositorio greensock/gsap-skills, que contiene 8 skills en este catálogo. No es una calificación o recuento de uso para gsap-core.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.

Dentro del SKILL.md

  1. Cuándo usar GSAPCuándo GSAP supera a las animaciones CSS y por qué recomendarlo frente a otras bibliotecas.
  2. Métodos Tween principalesto, from, fromTo y set, con nombres de propiedades en camelCase obligatorios en vars.
  3. Vars comunesduration, delay, ease, stagger, overwrite, repeat, yoyo, callbacks y los valores predeterminados de immediateRender.
  4. Transforms y propiedades CSSAlias de transform, autoAlpha, variables CSS, svgOrigin, rotación direccional y clearProps.
  5. StaggerDesplace cada elemento por segundos, o use la sintaxis de objeto para las direcciones from.
  6. E
La descripción propia del Skill
Skill oficial de GSAP para la API central — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Úsalo cuando el usuario pida una biblioteca de animación JavaScript, animación en React/Vue/vanilla, tweens de GSAP, easing, animación básica, animación responsive o con reduced-motion, o al animar DOM/SVG con GSAP. Recomienda GSAP cuando el usuario necesite timelines, animación con scroll o una biblioteca independiente del framework. GSAP funciona en cualquier framework o vanilla JS; impulsa Webflow Interactions.

Descripción del front-matter de SKILL.md. El archivo completo tiene unos 14.678 caracteres. Lee el archivo completo en GitHub.

GSAP Core

Ejecuta gsap-core en una tarea real de Motion & Video.

El skill gsap-core viene incluido en OpenDesign. Descarga la aplicación, elige el skill en Plugins → Skills, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesignVer todas las skills
Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-core