gsap

Descripción general de gsap skill

Qué hace gsap skill

La skill gsap es una referencia práctica de animación con GSAP para composiciones de HyperFrames. Te ayuda a elegir el tipo de tween adecuado, a definir bien las propiedades y a construir timelines que se comporten de forma predecible en producción. Si quieres una guía de gsap centrada en la implementación y no en la teoría, esta skill está pensada para que las animaciones funcionen con menos ensayo y error.

Cuándo encaja mejor esta skill

Usa la skill gsap si estás creando animaciones de entrada, transiciones de movimiento, secuencias con stagger, escenas guiadas por timeline o efectos de animación reutilizables. Es especialmente útil en trabajos de Design Implementation, donde ya tienes una especificación visual y necesitas traducirla a gsap.to(), from(), fromTo() o gsap.timeline() sin romper los tiempos ni sobrescribir propiedades.

Por qué merece la pena instalarla

Su valor principal es ayudar a tomar decisiones: qué API de GSAP usar, qué vars importan y qué valores por defecto pueden provocar errores. La skill también pone sobre la mesa restricciones prácticas como nombres de propiedades en camelCase, immediateRender, alias de transform y patrones pensados para rendimiento, como will-change y quickTo. Eso hace que la skill gsap sea más útil que un prompt genérico cuando necesitas un resultado realmente listo para enviar a producción.

Cómo usar la skill gsap

Instala e inspecciona los archivos correctos

Instala con:

npx skills add heygen-com/hyperframes --skill gsap

Empieza por skills/gsap/SKILL.md, luego lee references/effects.md para ver patrones ya preparados y scripts/extract-audio-data.py si tu animación depende de datos de audio. Este repo es pequeño, así que esos archivos te dan muy rápido gran parte del contexto real de uso.

Dale a la skill un brief de animación concreto

La skill gsap funciona mejor cuando tu prompt incluye el elemento, el objetivo del movimiento, el timing y las restricciones. En lugar de “anima esta tarjeta”, prueba algo como: “Crea una entrada con gsap para una tarjeta de producto: aparece con fade desde 24px por debajo, duración de 0.6s, power3.out, stagger de tres tarjetas en pasos de 0.12s, sin saltos de layout y sin sobrescribir los transforms de hover”. Ese tipo de input ayuda a la skill a elegir el uso correcto de gsap y evita defaults vagos.

Lee las rutas de código que afectan la calidad del resultado

Para trabajo de implementación, prioriza las secciones sobre métodos centrales de tween, vars comunes, mapeo de transforms y CSS, valores basados en funciones y timelines. Esas son las partes que cambian de verdad la calidad del resultado. Si necesitas un patrón de movimiento reutilizable, revisa primero references/effects.md; ahí se muestra cómo espera el repo que se estructuren los effects y en qué casos importan los requisitos de plugins.

Usa detalles de flujo de trabajo que eviten animaciones defectuosas

Prefiere los alias de transform de GSAP frente a cadenas transform crudas, y usa gsap.set() para preparar el estado inicial antes del movimiento con tiempo. Al encadenar timelines, usa labels y parámetros de posición de forma intencional en lugar de apilar todo en el mismo timestamp. Si un tween toca el mismo elemento o propiedad más de una vez, presta atención a immediateRender y overwrite para que la skill gsap no genere saltos visibles.

Preguntas frecuentes sobre la skill gsap

¿Esta skill gsap es solo para HyperFrames?

Está escrita para composiciones de HyperFrames, pero los patrones de uso de GSAP se pueden trasladar en general. Si no trabajas en HyperFrames, igual puedes aprovechar la guía de API, aunque tendrás que adaptar por tu cuenta la estructura de archivos y la gestión del ciclo de vida.

¿Necesito experiencia previa con GSAP?

No. La skill gsap es adecuada para principiantes que saben qué resultado de animación quieren, pero no tienen claro qué API usar. Aun así, resulta más útil si puedes describir los estados del elemento, el timing y la secuencia, porque esos detalles generan mejores resultados que un prompt genérico tipo “hazlo suave”.

¿Cuándo no debería usarla?

No recurras a esta skill si solo necesitas una transición CSS puntual o si tu movimiento es lo bastante simple como para definirlo directamente en hojas de estilo. Tampoco encaja bien cuando necesitas una arquitectura de runtime personalizada que no tenga relación con timelines de GSAP, o cuando tu brief no define elementos objetivo ni estados de movimiento deseados.

¿En qué se diferencia de un prompt genérico?

Un prompt genérico suele producir una idea de animación plausible. La skill gsap resulta más útil cuando necesitas sintaxis correcta de GSAP, valores por defecto más seguros y un comportamiento de timeline que se corresponda con la realidad de la implementación. Reduce la incertidumbre en torno al onboarding estilo gsap install, la elección del tween, la nomenclatura de propiedades y las decisiones sensibles al rendimiento.

Cómo mejorar la skill gsap

Aporta la especificación visual, no solo el objetivo

La forma más rápida de mejorar el resultado de gsap es especificar estado inicial, estado final, secuencia y restricciones. Por ejemplo: “El texto debe subir 20px y aparecer con fade en 0.5s; después, el botón debe escalar de 0.96 a 1 con back.out(1.7), y ambos deben respetar reduced motion”. Eso le da a la skill suficiente estructura para generar un plan de uso de gsap más sólido.

Nombra los elementos y los riesgos de conflicto

Menciona selectores, cantidad de elementos y cualquier motion ya existente en la página. Si sabes que una propiedad puede estar animándose en otro sitio, dilo. El fallo más común no es el tween en sí, sino un conflicto por overwrite o una colisión de transforms, así que señalarlo mejora los resultados de inmediato.

Pide un resultado listo para implementar

Si quieres un resultado de Design Implementation, pide en la primera respuesta el orden del timeline, las vars exactas y los requisitos de plugins. Buenas repreguntas son “convierte esto en un timeline reutilizable”, “reemplaza los transforms crudos por alias de GSAP” o “optimiza el rendimiento y evita layout thrash”. Esas indicaciones empujan a la skill gsap hacia código preparado para producción, no hacia motion de demostración.

Itera cambiando solo una cosa cada vez

Después del primer pase, refina solo una dimensión: timing, easing, staggering o estructura. Si el movimiento se siente demasiado brusco, pide suavizar el ease; si va demasiado lento, reduce la duración; si los elementos compiten entre sí, solicita overwrite: "auto" o labels de timeline más claros. Así mantienes la skill gsap enfocada y haces más fácil evaluar la siguiente versión.