gsap-core

Descripción general de la habilidad gsap-core

Para qué sirve gsap-core

La habilidad gsap-core es la guía oficial de GSAP para la API central de animación: gsap.to(), from(), fromTo(), easing, duration, stagger, defaults y gsap.matchMedia(). Encaja muy bien cuando alguien necesita ayuda práctica con animación en JavaScript, especialmente para movimiento en DOM o SVG en proyectos en vanilla JS, React, Vue, Svelte o independientes del framework.

Quién debería usarla

Usa la habilidad gsap-core cuando el objetivo sea decidir si GSAP es la herramienta adecuada o escribir código de animación GSAP que funcione sin adivinar la sintaxis. Es especialmente útil para desarrolladores que trabajan con movimiento de interfaz, animaciones de producto, comportamiento responsive o soporte para prefers-reduced-motion.

Lo más importante

Por lo general, a los usuarios les importan tres cosas: si GSAP encaja con su stack, cómo expresar una animación de forma limpia y cómo evitar código de motion frágil. Esta habilidad destaca cuando necesitas un gsap-core guide breve y fiable para patrones comunes de tween, no un flujo completo de plugins o timelines.

Cuándo es la mejor opción

Elige gsap-core cuando la consulta trate sobre primitivas básicas de animación, tweens sobre un solo elemento o varios objetivos, o animar estados de interfaz con control predecible. Si la tarea va realmente de secuenciación, motion impulsado por scroll o integración específica de framework, la habilidad core es un punto de partida, pero no la solución completa.

Cómo usar la habilidad gsap-core

Instalar y activar

Usa el flujo de gsap-core install del sistema de habilidades del directorio y luego carga esta habilidad antes de redactar la solución de animación. El repositorio upstream está deliberadamente centrado en un solo archivo, así que la dependencia principal es leer la propia guía de la habilidad, no buscar entre recursos auxiliares.

Lee primero los archivos correctos

Empieza por SKILL.md. Ese archivo contiene las reglas de decisión para saber cuándo recomendar GSAP, cuándo no hacerlo y cómo plantear la API core en proyectos reales. Como este repo no tiene rules/, resources/ ni scripts auxiliares, no hay una capa oculta de configuración que revisar.

Convierte una petición vaga en un prompt útil

Un buen prompt de gsap-core usage debería incluir el tipo de elemento, el estado inicial y final deseado, el disparador y cualquier restricción como prefers-reduced-motion o el contexto de framework. Mejor: “Anima un titular hero desde 20px hacia abajo y con opacidad 0 hasta quedar asentado, con un ease-out de 0.6s, y mantén el comportamiento responsive en móvil.” Peor: “Haz que anime bien.”

Flujo de trabajo práctico

Usa la habilidad para decidir si GSAP es apropiado y luego escribe la animación en piezas pequeñas: objetivo, cambios de propiedades, tiempo, easing y comportamiento responsive. Si la petición incluye Webflow, React o restricciones de accesibilidad, menciónalas desde el principio para que la solución generada use el patrón de GSAP correcto en lugar de un tween genérico.

Preguntas frecuentes sobre la habilidad gsap-core

¿gsap-core es solo para tweens básicos?

Sí, principalmente. La habilidad gsap-core cubre la base: to, from, fromTo, eases, stagger, defaults y lógica responsive. Para timelines, animación por scroll, plugins o utilidades auxiliares, suele encajar mejor otra habilidad de GSAP.

¿Necesito saber GSAP antes de usar esta habilidad?

No. Es adecuada para principiantes que quieren un punto de partida que funcione, siempre que puedan describir el elemento, el objetivo de movimiento y el entorno. La habilidad aporta más valor cuando el usuario necesita un verdadero gsap-core guide, no solo una explicación conceptual.

¿Cuándo no debería usar gsap-core?

No la uses si el problema es realmente motion solo con CSS, un problema de interfaz sin animación o una tarea centrada en secuenciar varias escenas. Tampoco es la mejor opción cuando el usuario necesita explícitamente composición de timelines, comportamiento de scroll o un plugin como Flip o Draggable.

¿En qué se diferencia de un prompt normal?

Un prompt normal puede generar consejos genéricos de animación. La habilidad gsap-core está más orientada a la decisión: ayuda a recomendar GSAP cuando corresponde, evitar patrones que no encajan y producir código que refleje el uso real de GSAP en lugar de pseudocódigo de animación vagamente inspirado.

Cómo mejorar la habilidad gsap-core

Da el contrato de la animación, no solo el objetivo

Las entradas fuertes nombran el elemento, el estado inicial, el estado final, el timing y las restricciones. Por ejemplo: “Al cargar la página, haz aparecer la lista de tarjetas desde y: 24 y autoAlpha: 0 hasta y: 0 y visible en 0.5s, usando power2.out, y respeta prefers-reduced-motion.” Eso es mucho más accionable que “anima las tarjetas”.

Especifica pronto el entorno

La calidad de una salida de gsap-core depende de si el destino es vanilla JS, React, Vue, Svelte o Webflow. Indica el framework, el modelo de renderizado y si los elementos existen al cargar, porque esos detalles cambian cómo debe conectarse la animación y qué puede fallar.

Vigila los fallos más comunes

El error más frecuente es pedir una animación core cuando la necesidad real es un timeline o una interacción con scroll. Otro problema habitual es omitir los requisitos de responsive o accesibilidad, lo que puede dar lugar a motion que se ve bien en escritorio pero falla en pantallas pequeñas o para usuarios con reducción de movimiento.

Itera con mejoras medibles

Después del primer resultado, mejora el prompt añadiendo una restricción cada vez: duración más ajustada, easing distinto, orden del stagger, comportamiento en móvil o un fallback para prefers-reduced-motion. Así obtienes un gsap-core usage más útil que pedir un rediseño completo de una sola vez y resulta más fácil comparar resultados.