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

GSAP Performance Skill.

Un skill de Claude Code y Codex para movimiento y video: rendimiento en GSAP: transforms, evitar layout thrash, will-change, batching.

  • Movimiento y video
  • Código UI
Descargar OpenDesignVer guía de uso
greensock/gsap-skills · skills/gsap-performance/SKILL.mdSKILL.md
--- name: gsap-performance description: Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps. --- ## When to Use This Skill ## Prefer Transform and Opacity ## will-change ## Batch Reads and Writes ## Many Elements (Stagger, Lists) ## Frequently updated properties (e.g. mouse followers)
Encabezado y títulos de sección leídos del archivo original el 14/09/2026 · 4105 caracteres completos

01 Qué hace

Qué hace la skill gsap-performance 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

Guía oficial de GSAP para mantener las animaciones a 60fps fluidos eligiendo propiedades económicas y evitando el trabajo de layout. Indica animar claves de transform (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) y opacity en lugar de width, height, top, left, margin o padding, poner will-change solo en CSS en los elementos que realmente se animan, y hacer todas las lecturas del DOM antes de las escrituras para no forzar el layout.

La guía sobre procesamiento por lotes cubre stagger frente a tweens con retrasos manuales, virtualización para listas largas, gsap.quickTo() para seguidores del ratón, ajuste de pin y scrub con ScrollTrigger.refresh() con debounce, y la eliminación de tweens fuera de pantalla. Está pensada para diseñadores y desarrolladores que afinan animaciones de GSAP existentes, no que las crean desde cero.

Qué produce

  • Una declaración will-change para añadir al CSS del elemento animado.
  • Una configuración de gsap.quickTo() para x e y, controlada por un listener de mousemove en un contenedor.
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Animar propiedades compatibles con el compositor

    Restrinja la animación a claves de transform y opacity, que mantienen el trabajo en el compositor en lugar de provocar layout y paint.

  2. 02
    Deje que GSAP agrupe las escrituras

    GSAP ya agrupa las actualizaciones internamente, por lo que el riesgo está en que su propio código del DOM entrelace lecturas y escrituras a su alrededor.

  3. 03
    Reutilice un solo tween para valores frecuentes

    Para propiedades que se actualizan en cada movimiento del puntero, gsap.quickTo() mantiene activo un único tween en lugar de crear uno nuevo por actualización.

  4. 04
    Controle el trabajo impulsado por el scroll

    Un valor de scrub pequeño, como scrub: 1, puede reducir el trabajo realizado durante el desplazamiento, pero el archivo indica que hay que probar esa configuración en dispositivos de gama baja.

  5. 05
    Detenga la animación que no puede ver

    Pause o elimine las animaciones fuera de pantalla e inactivas, por ejemplo cuando el usuario abandona la sección.

02 Encuentra tu caso de uso

Cuándo Usar la Skill gsap-performance

Usa la skill gsap-performance en Claude Code o Codex cuando el trabajo sea motion y video de este tipo. El ajuste y límites abajo son tomados del archivo propio de la skill.

Buen caso de uso

  • Una animación de GSAP existente está perdiendo fotogramas y desea reducir su coste de layout y paint.
  • Alguien pregunta sobre jank, FPS o buenas prácticas para animación rápida en un proyecto GSAP.
  • Está animando una lista larga y necesita consejo sobre virtualización y cómo evitar cientos de tweens simultáneos.
  • Una sección de scroll fija un elemento y necesita limitar qué se promueve.

Conozca los límites

  • Establecer will-change o force3D en todo por si acaso es explícitamente incorrecto; son para elementos que realmente se están animando.
  • Cientos de tweens o ScrollTriggers superpuestos se consideran un antipatrón cuando no se han probado en dispositivos de gama baja.

Qué proporcionar

  • Las propiedades que su animación cambia actualmenteNecesita saber qué se está animando para juzgar si transform y opacity pueden sustituir a propiedades que afectan mucho al layout.

03 Dentro del skill

Reglas que la skill gsap-performance 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. Evite propiedades que provocan layout

    width, height, top, left, margin y padding activan el layout y pueden causar jank, así que evítelos cuando un transform logre el mismo efecto.

  2. Muévase con X e Y, no con Left y Top

    Las propiedades x e y de GSAP son transforms (translate) por defecto, así que úselas en lugar de left o top para el movimiento.

  3. will-change solo donde algo se anima

    Defina will-change en CSS en los elementos que se van a animar; esto le indica al navegador que promueva la capa, por lo que debe aplicarse solo a elementos animados.

  4. Stagger en lugar de delays manuales

    Cuando la animación es idéntica en todos los elementos, use stagger en lugar de muchos tweens separados con delays escritos a mano.

  5. Nunca cree timelines por frame

    Reutilice los timelines; crear nuevos timelines en cada frame se señala como algo derrochador.

  6. Actualice ScrollTrigger solo ante cambios reales de layout

    Llame a ScrollTrigger.refresh() cuando el layout realmente cambie, por ejemplo tras la carga de contenido, no en cada resize, y aplique debounce cuando sea posible.

  7. Limpie lo que inicia

    Limpie o detenga las animaciones fuera de pantalla y actualice ScrollTrigger cuando el layout cambie, con debounce cuando sea posible, para que nada siga ejecutándose después de que ya no se necesite.

04 Ponlo a trabajar

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

Agregar gsap-performance a Claude Code, Codex o Su 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-performance

Forma genérica de la CLI skills para skills/gsap-performance/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
Here is my [product landing page] with a GSAP intro and a pinned ScrollTrigger section, and it drops frames on an [older Android phone]. Go through the animation and tell me which properties I should swap for transforms, which elements genuinely need will-change, and whether my ScrollTrigger.refresh() calls fire more often than the layout actually changes. I also have a [custom cursor] that follows the pointer and feels heavy.

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:

  • Busque lecturas y escrituras del DOM que se intercalen, ya que eso provoca repetidos layout thrashing; todas las lecturas deben ir primero.
  • Confirme que no queda nada en ejecución: los tweens y ScrollTriggers sueltos siguen corriendo y afectan el rendimiento y la corrección.
  • Confirme que las propiedades que anima se mantienen en transform y opacity, para que el navegador solo tenga que hacer trabajo de composición.

En OpenDesign gsap-performance 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-performance/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 Captura de GitHub tomada el 14/09/2026 para todo el repositorio greensock/gsap-skills, que contiene 8 skills en este catálogo. No es una calificación o conteo de uso para gsap-performance.
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 este skillAplíquelo al optimizar animaciones de GSAP para 60fps o jank; señala skills relacionados.
  2. Prefiera transform y opacityAnime las propiedades de transform y opacity; evite las propiedades de layout; x e y en lugar de left y top.
  3. will-changeAgregue will-change en CSS en los elementos que se van a animar para indicar la promoción de capa.
  4. Agrupe lecturas y escriturasGSAP agrupa las escrituras; haga todas las lecturas del DOM antes de las escrituras para evitar el thrashing.
  5. Muchos elementos (stagger, listas)Stagger supera a los delays manuales; virtualice las listas largas; reutilice los timelines en lugar de crear nuevos.
  6. Propiedades actualizadas con frecuencia (p. ej. seguidores del mouse)Use gsap.quickTo con un handler de mousemove para valores de x e y que se actualizan a menudo.
  7. ScrollTrigger y rendimientoFije (pin) solo lo necesario, pruebe un valor de scrub pequeño, actualice (refresh) únicamente cuando cambie el layout.
  8. Reduzca el trabajo simultáneoPause o detenga las animaciones fuera de pantalla; simplifique o secuencie la animación de propiedades pesadas.
  9. Buenas prácticasLista de cuatro puntos: transform y opacity, will-change acotado, stagger, limpieza y refresh.
  10. EviteAntipatrones: propiedades de layout para el movimiento, will-change o force3D generalizados, volumen sin probar, limpieza ignorada.
La descripción propia del Skill
"Skill oficial de GSAP para rendimiento — prefiera transforms, evite layout thrashing, will-change, batching. Use al optimizar animaciones GSAP, reducir jank, o cuando el usuario pregunte sobre rendimiento de animación, FPS o 60fps suaves."

Descripción de front-matter desde SKILL.md. El archivo completo tiene aproximadamente 4.105 caracteres. Lea el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill gsap-performance

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

¿Uso esto en lugar de gsap-core?

No. Este skill es la capa de rendimiento sobre el trabajo normal de GSAP: las animaciones se construyen con gsap-core (transforms, autoAlpha) y gsap-timeline, y los detalles de rendimiento de ScrollTrigger están en gsap-scrolltrigger.

¿Cómo debería construir un seguidor de ratón?

Use gsap.quickTo() para los valores x e y con una duration y un ease, y luego llame a las funciones devueltas desde un listener de mousemove. Esto reutiliza un único tween en lugar de crear uno nuevo en cada actualización.

GSAP Performance

Ejecutar gsap-performance en una Tarea Real de Motion y Video.

El skill gsap-performance viene incluido en OpenDesign. Descargue la aplicación, seleccione el skill en Plugins → Skills, pegue el prompt anterior y lea el plan antes del resultado.

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