gsap-timeline

Descripción general de la habilidad gsap-timeline

Para qué sirve gsap-timeline

La habilidad gsap-timeline te ayuda a construir y razonar sobre secuencias de gsap.timeline(): pasos de animación ordenados, superposiciones, etiquetas y reproducción anidada. Usa la habilidad gsap-timeline cuando el problema real sea coordinar, no crear un único tween: por ejemplo, coreografiar estados de entrada, sincronizar varios elementos de la interfaz o convertir una idea de motion design en una secuencia repetible.

Casos de uso más adecuados

Encaja muy bien para desarrolladores y diseñadores que trabajan en motion para UI, microinteracciones de producto, revelados en landing pages, flujos de onboarding o cualquier animación que necesite un timing predecible. Es especialmente útil para gsap-timeline for UI Design cuando necesitas transformar una narrativa visual en una estructura concreta de timeline.

Por qué esta habilidad es diferente

El valor principal no es “cómo animar”, sino cómo colocar correctamente cada paso de la animación. La guía de gsap-timeline se centra en el orden por defecto, el parámetro de posición y el comportamiento de reproducción para que evites suposiciones frágiles sobre el timing. Si necesitas control de scroll, easing de una sola propiedad o integración específica con React, normalmente conviene empezar por otra habilidad de GSAP.

Cómo usar la habilidad gsap-timeline

Instalar y activar

Usa el flujo de instalación del directorio para el paso de instalación de gsap-timeline y luego adjunta la habilidad a la tarea antes de redactar código o prompts. Un comando de instalación típico es:
npx skills add greensock/gsap-skills --skill gsap-timeline
Después, lee primero el contenido de la habilidad para que el modelo tenga claras las reglas de secuenciación antes de generar código de animación.

Lee primero la fuente correcta

Empieza con SKILL.md en skills/gsap-timeline. En este repositorio, ese es el único archivo fuente, así que la vía más rápida es leerlo completo en vez de buscar carpetas de apoyo que no existen aquí. Presta especial atención a:

• cuándo debe usarse la habilidad
• cómo funcionan los valores por defecto al crear timelines
• las formas del parámetro de posición
• las notas sobre reproducción y anidación de timelines

Convierte una petición vaga en un prompt utilizable

La habilidad funciona mejor cuando el prompt incluye el objetivo de la animación, los elementos afectados, el orden deseado y cualquier regla de superposición. Compara estos ejemplos:

• Débil: “Haz que esto anime bien con GSAP.”
• Fuerte: “Usa gsap-timeline para revelar el título del hero, luego escalona las tarjetas y después haz aparecer el CTA 0.2s antes de que terminen las tarjetas. Mantén la secuencia legible y etiqueta los hitos principales.”

Para usar gsap-timeline, incluye la intención de timing, como “superponer”, “después”, “al mismo tiempo” o una etiqueta con nombre. Eso permite que el modelo elija la sintaxis de posición correcta en lugar de adivinar.

Flujo de trabajo que evita timelines malos

Primero redacta el motion en beats y luego asigna cada beat a un paso del timeline. Si la animación tiene bifurcaciones, secciones repetidas o estados de entrada y salida reutilizables, pide etiquetas y timelines anidados desde el principio. Si estás construyendo motion para UI, especifica si la animación debe ser reversible, interrumpible o depender del ciclo de vida del componente, porque eso cambia cómo debe estructurarse el timeline.

Preguntas frecuentes sobre la habilidad gsap-timeline

¿gsap-timeline es solo para usuarios avanzados de GSAP?

No. Es amigable para principiantes si puedes describir una secuencia con claridad. La principal curva de aprendizaje está en entender que los timelines se van encadenando por defecto y que el parámetro de posición controla la colocación. Si puedes explicar el orden de los cambios en tu UI, la habilidad suele ser suficiente para generar un primer borrador funcional.

¿Cuándo no debería usarlo?

No uses gsap-timeline cuando solo necesites un tween único, easing básico u orquestación disparada por scroll. En esos casos, gsap-core, gsap-scrolltrigger o gsap-react pueden encajar mejor. La habilidad gsap-timeline es más fuerte cuando las relaciones de timing son el verdadero desafío.

¿En qué mejora a un prompt genérico?

Un prompt genérico a menudo produce timelines que animan en el orden correcto, pero con una lógica de colocación débil. La guía de gsap-timeline le da al modelo el vocabulario que necesita —comportamiento de append por defecto, offsets relativos, etiquetas y anclas de inicio/fin— para que el resultado sea más predecible y fácil de mantener.

¿Ayuda con flujos de trabajo de diseño de UI?

Sí, especialmente cuando un handoff de diseño describe el motion en prosa y no en código. Para gsap-timeline for UI Design, la habilidad ayuda a traducir “aparece el título, las tarjetas entran en cascada, el botón se asienta al final” en un plan de animación estructurado con tiempos explícitos en vez de una secuencia difusa.

Cómo mejorar la habilidad gsap-timeline

Aporta intención de timing, no solo resultados

La mejora más grande de calidad llega cuando indicas dónde se permite la superposición. Por ejemplo, di “haz que el subtítulo empiece 0.15s después de que arranque el título” en lugar de “hazlo suave”. Si la secuencia necesita una etiqueta, menciónala en el prompt para que el modelo pueda anclar después los pasos de forma consistente.

Da el contexto del motion que cambia la estructura

Indica si el timeline es para carga de página, interacción hover, abrir/cerrar un modal, onboarding o un loop repetido. Una entrada única puede ser simple; una interacción reversible puede necesitar una gestión de estado más limpia y menos supuestos implícitos. Aquí es donde la habilidad gsap-timeline resulta más útil: convierte la intención en una secuencia estable, no solo en código de animación.

Vigila los fallos más comunes

Los errores habituales son abusar de tiempos absolutos, olvidar que los tweens se añaden por defecto y mezclar en un mismo timeline asuntos de animación que no tienen relación entre sí. Si la primera salida no convence, pide que la misma secuencia se reescriba con etiquetas, menos segundos hardcodeados o puntos de superposición explícitos. Eso suele mejorar la claridad más que pedir “mejor animación”.

Itera con ediciones concretas

Después del primer borrador, refina el prompt nombrando los elementos, añadiendo un ritmo preferido y especificando restricciones como reduced motion, responsividad o reutilización. Buenos prompts de seguimiento incluyen:

• “Mantén la misma estructura de gsap-timeline, pero superpone la sección central en 0.25s.”
• “Reescribe esto con etiquetas para que pueda mantenerlo después.”
• “Adáptalo para un componente reutilizable y deja el timeline fácil de invertir.”