Descubrí GSAP y quise animarlo todo

Ya estaba usando GSAP sin haber descubierto GSAP

El portfolio ya contaba con GSAP Core y timelines. En Enfoque, ScrollTrigger sostenía una narración mecánica ligada al scroll; en Trabajo, Flip hacía posible que Projects y Services cambiaran de configuración sin cortar la continuidad; y el Home tenía una secuencia de entrada para presentar la identidad visual. Eran usos reales, pensados para problemas específicos.

Mi relación con la biblioteca todavía era más práctica que profunda. Podía decidir si una experiencia se veía bien o no, pero no tenía un mapa mental claro de cómo se conectaban las piezas ni de cuántas posibilidades había detrás de ellas.

La IA ayudaba a investigar, proponer alternativas y revisar implementaciones. Yo podía aprobar o rechazar un resultado visual, pero eso no siempre significaba que pudiera explicar técnicamente cada parte. Empezar a experimentar manualmente fue una manera de reducir esa distancia: tocar una propiedad, ver qué cambiaba y dejar de tratar el resultado como una caja negra.

Entonces encontré SplitText

El primer laboratorio consciente fue pequeño e independiente, en gsap-lab/. El texto era simple: Ingeniería y desarrollo web. Quería dividirlo por palabras y caracteres para ver qué pasaba si variaba unas pocas propiedades: y, duration, stagger y ease.

const split = SplitText.create(target, {
  type: "words,chars"
});

No era importante producir una animación espectacular en ese momento. Para entender qué controlaba cada valor, primero los exageré: aumenté mucho y, hice que el stagger fuera demasiado lento y probé back.out() frente a power3.out. Así resultaba más fácil percibir qué estaba cambiando cada parámetro.

Después podía reducir esos valores y empezar a decidir el ritmo en lugar de adivinarlo. Ese ejercicio pequeño empezó a convertir GSAP de “magia que alguien más escribió” en una herramienta que podía observar y entender. No porque ya supiera usarla a fondo, sino porque comenzaba a reconocer la relación entre una decisión y su consecuencia.

Y naturalmente quise usarlo todo

Después de SplitText cometí el error más predecible posible: seguí leyendo. Aparecieron ScrambleText, DrawSVG, MotionPath, masks, stagger y una cantidad de ejemplos que parecían tener una aplicación posible dentro del portfolio.

Empecé a imaginar texto resolviéndose como señal, líneas dibujándose, puntos recorriendo conexiones y cada título con su propia entrada. Mi primera reacción fue básicamente: quiero todo. Era fácil justificar cualquier cosa: si un plugin existía, seguro había una sección donde podía lucir bien. Esa no era una conclusión razonable, pero sí una reacción honesta al descubrir un vocabulario nuevo.

El problema no era la intensidad. El problema era la dispersión. Si cada elemento recibe una animación distinta solo porque puede, la interfaz deja de tener ritmo y empieza a pedir atención por todos lados.

El riesgo de convertir el portfolio en una feria

La primera respuesta podría haber sido “usar pocas animaciones”. Pero esa idea tampoco describía lo que quería construir. El Home podía ser deliberadamente cinematográfico; Enfoque podía contar una historia mecánica; Trabajo podía sentirse físico al cambiar de estado. El problema no era que alguna superficie tuviera personalidad.

La conclusión fue otra: No limitar la intensidad. Limitar la dispersión. Cada página podía tener una función distinta dentro del conjunto y, por lo tanto, una forma distinta de moverse. Bitácora y Contacto no necesitaban competir con esas experiencias; podían mantenerse como espacios más calmados para leer o iniciar una conversación.

Eso también volvió más fácil descartar ideas. Una animación puede ser bonita y aun así no tener un trabajo que hacer dentro de la interfaz. Cuando no explica jerarquía, cambio, conexión o respuesta, probablemente está ocupando más espacio mental del que aporta.

De efectos a un vocabulario de movimiento

Para no decidir cada animación desde cero, terminé organizando los plugins como un vocabulario propio para este portfolio. No es una metodología universal ni una regla para otros sitios; es una forma de recordar qué función cumple cada recurso antes de usarlo.

REVEAL         → SplitText
INITIALIZATION → ScrambleText
CONNECTION     → DrawSVG
DATA MOVEMENT  → MotionPath
STATE CHANGE   → Flip
SCROLL STORY   → ScrollTrigger

SplitText sirve para revelar una identidad que ya existe en el HTML. ScrambleText tiene sentido cuando una etiqueta se resuelve desde una lectura inicial hacia su texto real. DrawSVG permite que una conexión aparezca como conexión, no como un simple cambio de opacidad. MotionPath puede hacer que un único pulso represente un dato o un impulso recorriendo una línea. Flip conserva continuidad cuando la interfaz cambia de estado, y ScrollTrigger vincula una historia a la lectura.

El valor de nombrar esas relaciones no fue volverlas más importantes de lo que son. Fue evitar usarlas indistintamente. Si el movimiento tiene un verbo, es más fácil preguntar si ese verbo corresponde a lo que la interfaz necesita decir.

El Home dejó de cargar y empezó a ensamblarse

Ese vocabulario terminó de aterrizar en el Cinematic System Boot del Home. La frase que guio la decisión fue sencilla: el Home no carga, el Home se ensambla. No quería una pantalla de espera ni una simulación de telemetría; quería que la interfaz que ya existe se construyera delante de la persona.

La secuencia quedó organizada así: la instrumentación aparece mediante DrawSVG; un pulso breve recorre un path con MotionPath; el eyebrow se resuelve con ScrambleText; el nombre se revela con SplitText; la fotografía entra como núcleo; las tecnologías encuentran su posición alrededor de ella; y por último aparecen el texto, los CTA y los canales.

La primera visita de una sesión puede mostrar esa versión completa. Al volver al Home dentro de la misma sesión, la versión abreviada evita repetir toda la película. Me gustó esa decisión porque permite que la experiencia tenga presencia sin castigar una navegación repetida. Después del boot, la órbita sigue siendo la única pieza con movimiento continuo.

También aprendí cuándo no animar

Descubrir más plugins no obligaba a repartirlos por todo el sitio. Trabajo no recibió TextPlugin solo porque existía. Bitácora no necesitaba GSAP para sostener una nota larga. Contacto no requería otra experiencia encima de una superficie que ya debía ser directa. El Hero tampoco terminó con un typewriter, y las partículas aleatorias quedaron fuera.

Algunas de esas decisiones fueron más fáciles de tomar después de probar posibilidades. Aprender una herramienta también significa decidir cuándo no usarla. A veces la respuesta más útil no es agregar movimiento, sino dejar que una parte de la interfaz conserve silencio para que otra pueda tener peso.

Lo que todavía no sé

Usar varios plugins no significa dominar GSAP. Todavía estoy aprendiendo sobre timelines complejas, easings, composición, SVG, rendimiento, accesibilidad e interacción entre plugins. También sigo descubriendo qué decisiones se sienten bien por una razón concreta y cuáles solo parecen interesantes durante los primeros segundos.

Quise dejar esta nota para volver después y detectar cuánto cambió mi comprensión. Tal vez algunas cosas que ahora me parecen difíciles sean normales dentro de un tiempo; tal vez descubra que estaba resolviendo otras de forma innecesariamente complicada. Prefiero poder compararlo con algo escrito que confiar en recordar cómo pensaba.

Lo que realmente me voló la cabeza

Lo sorprendente no fue descubrir que se pueden mover letras o dibujar líneas. Fue entender que una animación puede explicar una aparición, una conexión, un flujo, una transformación, una jerarquía o un estado. Puede ayudar a que una interfaz no solo muestre información, sino que también haga visible una relación entre sus partes.

Ahí el movimiento deja de ser un efecto suelto y empieza a formar parte del lenguaje de la interfaz. Cada animación debería poder responder dos preguntas: ¿qué está haciendo? y ¿por qué tendría que moverse? Si no hay una respuesta clara, probablemente solo es un efecto. Y sí, todavía quiero jugar con un montón de ellos.