Cómo se hacen las animaciones web: las 5 capas detrás de los sitios que te dejan mirando

Entrás a un sitio, algo se mueve al scrollear, un texto se arma solo y te quedás mirando. Después cerrás la pestaña y seguís sin saber cómo se hizo. Este post desarma eso: qué técnica hay detrás de cada tipo de movimiento, y cuál de todas podés usar vos si venís del motion y no programás.

Lo esencial

• El navegador ya anima solo, sin JavaScript: las animaciones controladas por scroll son parte del estándar CSS y se atan a una línea de tiempo de scroll en vez de al reloj (MDN).

• GSAP, la biblioteca de animación más usada de la industria, pasó a ser 100% gratis — incluidos los plugins que antes se pagaban, como ScrollTrigger (GSAP).
• Si animás en After Effects, hay un camino directo al navegador sin escribir código: Lottie exporta tu composición a un archivo que la web reproduce nativamente (Lottie).

Si todavía no viste ejemplos concretos, empezá por los 7 sitios web con las mejores animaciones y por 15 ejemplos de animación web. Este post es el paso siguiente: no qué mirar, sino cómo está hecho.

¿Con qué se hacen realmente las animaciones de una página web?

No hay una sola herramienta. Hay cinco capas, y casi todo sitio que te impresiona usa dos o tres mezcladas. Entender cuál es cuál te sirve para dos cosas: dejar de mirar un sitio como magia, y saber en qué parte del proceso podés entrar vos.

CSS: lo que el navegador ya hace solo

La capa más básica es también la que más cambió en los últimos años. Hoy el navegador puede animar atado al scroll sin una línea de JavaScript.

MDN lo define así: las animaciones controladas por scroll permiten «animar valores de propiedades sobre una línea de tiempo basada en el scroll en vez de la línea de tiempo temporal por defecto» (MDN). En criollo: en vez de que la animación avance con el reloj, avanza con la rueda del mouse.

Hay dos variantes y conviene distinguirlas, porque son dos efectos distintos que ves todo el tiempo:

• Scroll progress timeline (scroll()): la animación avanza según cuánto scrolleaste en la página. Es la barra de progreso arriba de un artículo.
• View progress timeline (view()): la animación avanza según cuánto se ve el elemento en pantalla. Es la tarjeta que aparece cuando entra al viewport.

La propiedad que las conecta se llama animation-timeline. No necesitás escribirla vos, pero sí reconocer el efecto cuando lo ves.

Por qué algunas animaciones web van suaves y otras se traban

Acá hay un dato técnico que te conviene saber aunque no programes, porque explica el 90% de los sitios que se sienten pesados.

El navegador arma la página en etapas: calcula posiciones, pinta, y compone. Google lo resume sin vueltas: para mantener la animación en la etapa de composición hay que limitarse a `opacity` y `transform` (web.dev). Esas dos propiedades el navegador las optimiza mucho, porque puede moverlas sin recalcular toda la página.

Si en cambio animás el ancho, el alto o la posición de un elemento, el navegador rehace el cálculo de layout en cada frame. Ahí aparece el tironeo.

La traducción para nosotros: mover y desvanecer sale barato; cambiar tamaño y posición reales sale caro. Cuando armes una animación pensada para web, favorecé escala, desplazamiento y opacidad. Es la misma lógica de eficiencia que ya trabajamos en cómo animar mejor usando menos frames: menos trabajo, mejor resultado.

GSAP: la herramienta de la industria, ahora gratis

GSAP es la biblioteca de JavaScript con la que está hecha buena parte de los sitios premiados que mirás. Durante años, sus plugins más potentes se pagaban por suscripción.

Eso cambió. Después de que Webflow comprara la herramienta, la página oficial de precios hoy dice textual: «GSAP is now 100% free for all users» — GSAP es ahora 100% gratis para todos los usuarios (GSAP). Los plugins que antes eran pagos, como ScrollTrigger (el que ata animaciones al scroll), SplitText (el que separa un texto letra por letra) y MorphSVG (el que transforma una forma en otra), quedaron incluidos.

Por qué te importa aunque no escribas JavaScript: si trabajás con un desarrollador, ya no hay excusa de presupuesto para las animaciones buenas. Y si alguna vez viste un texto que se arma letra por letra al scrollear, ahora sabés cómo se llama la pieza y podés pedirla por su nombre.

Lottie: tu animación de After Effects corriendo en el navegador

Esta es la capa que más nos toca de cerca, y la que casi nadie aprovecha.

Lottie es un formato que permite que una animación hecha en After Effects se reproduzca directo en una web. El flujo es simple: animás normal, exportás con un plugin —Bodymovin, creado por el argentino Hernán Torrisi, o el plugin oficial de LottieFiles— y sale un archivo .json que el navegador reproduce (Lottie).

No es un video. Es la animación descripta como datos, así que pesa poquísimo, escala sin pixelarse y se puede controlar desde la página. Por eso lo ves en los íconos que se animan al pasar el mouse y en las ilustraciones de las pantallas de carga.

Ahora la parte que importa, que es de criterio. No todo lo que hacés en After Effects sobrevive la exportación. Efectos, algunos modos de fusión y ciertas capas no viajan. La consecuencia práctica es que una animación pensada para Lottie se diseña distinto desde el principio: formas simples, transformaciones limpias, todo resuelto con posición, escala, rotación y opacidad.

Eso no es una limitación: es una restricción que te obliga a resolver el movimiento con lo esencial. Que es, justamente, donde se nota si sabés animar. Si el movimiento funciona sin efectos encima, el timing está bien.

Rive: cuando la animación tiene que responder

Lottie reproduce. Rive reacciona.

La diferencia está en algo llamado state machine —máquina de estados—. En vez de una animación que va de principio a fin, definís estados (en reposo, con el mouse encima, presionado, cargando, listo) y las transiciones entre ellos. Después, la página cambia de estado según lo que hace el usuario y la animación responde sola.

La propia documentación de Rive lo plantea como su diferencia central frente a Lottie: control de la interactividad en tiempo real, no reproducción lineal (Rive). LottieFiles, del otro lado, viene incorporando sus propias máquinas de estado, así que la distancia entre las dos se está achicando (LottieFiles).

Para elegir, la regla corta: si la animación siempre hace lo mismo, Lottie alcanza. Si tiene que contestarle al usuario, mirá Rive. Ya escribimos sobre hacia dónde va esto en Rive y Unreal Engine: por qué el motion interactivo está creciendo.

WebGL: la capa de los sitios que parecen un videojuego

Cuando entrás a un sitio y hay un objeto 3D que gira siguiendo el mouse, o partículas que reaccionan, eso es WebGL: gráficos en tiempo real dentro del navegador, usando la placa de video.

Es la capa más cara en todo sentido. Pide equipo técnico, pide optimización y castiga fuerte a los dispositivos lentos. Casi ningún proyecto la necesita, y muchos sitios que la usan lo hacen para impresionar, no para comunicar.

Te la nombro para que la reconozcas y para que sepas que no es el punto de partida de nadie.

Lo que separa una animación web buena de una que marea

Acá está la parte que las cinco capas no te dan, y es la que decide si el sitio funciona.

Una animación web mal calibrada no es solo fea: puede hacerle mal a alguien. Los efectos de parallax —cuando el fondo se mueve a distinta velocidad que el frente— son un disparador conocido de trastornos vestibulares, con mareo, náuseas y migraña (MDN).

Por eso los sistemas operativos tienen una opción para reducir el movimiento, y la web puede leerla. Se llama prefers-reduced-motion. Google aclara bien el criterio: no significa borrar todas las animaciones, sino desactivar el movimiento salvo que sea esencial para la función o la información (web.dev). La recomendación concreta es reemplazar escalados, rotaciones y desplazamientos grandes por fundidos y cambios de color.

Fijate lo que significa: la accesibilidad te obliga a tener dos versiones de la misma idea, una con movimiento y una sin. Y para resolver la segunda sin que la pieza pierda sentido, necesitás saber qué estaba comunicando el movimiento. Eso es criterio, no software.

Es la misma discusión de por qué saber After Effects no te convierte en motion designer, aplicada a la web. Las cinco herramientas de arriba son gratis o casi. El juicio para decidir qué se mueve, cuánto y por qué, no viene incluido.

Entonces, ¿por dónde entrás vos si venís del motion?

Si animás y no programás, tenés más lugar del que pensás. El movimiento sigue siendo el trabajo; lo que cambia es el envase.

1. Aprendé a exportar a Lottie. Es el camino más corto entre lo que ya sabés hacer y una web. Animá algo simple —un ícono, un logo, un loader— y exportalo.
2. Diseñá pensando en la restricción. Posición, escala, rotación y opacidad. Si el movimiento se sostiene con eso, está bien resuelto.
3. Aprendé a nombrar las piezas. Decir «esto va con ScrollTrigger» o «esto es un state machine» te cambia la conversación con cualquier desarrollador.
4. Mirá sitios con ojo de animador, no de espectador. Cuánto dura cada transición, qué entra primero, qué espera. Es lo mismo que hacemos al diagnosticar por qué una animación no se siente bien, pero en una interfaz.
5. Empezá por la interfaz, no por el espectáculo. El motion aplicado a UI es donde hay trabajo real y donde el movimiento mejora la experiencia, tema que desarrollamos en motion graphics en interfaces.

Preguntas frecuentes

¿Necesito saber programar para hacer animaciones web?

No para todas. Lottie y Rive te dejan animar en una herramienta visual y entregar un archivo que el sitio reproduce. GSAP y WebGL sí piden JavaScript.

¿Cuál es la diferencia entre Lottie y un video?

Un video guarda píxeles; Lottie guarda instrucciones. Por eso pesa mucho menos, se ve nítido en cualquier tamaño y la página puede controlarlo o cambiarle el color.

¿Puedo usar cualquier animación de After Effects en Lottie?

No. Muchos efectos, modos de fusión y tipos de capa no se exportan. Conviene diseñar desde el arranque con transformaciones simples en lugar de arreglarlo después.

¿GSAP sigue siendo pago?

No. Desde que Webflow lo adquirió, la biblioteca completa es gratis, incluidos los plugins que antes requerían suscripción (GSAP).

¿Por qué algunos sitios animados se sienten lentos?

Casi siempre porque animan propiedades que obligan al navegador a recalcular la página en cada frame, en vez de limitarse a transform y opacity (web.dev).

¿Está mal usar parallax?

No está mal, está mal usarlo sin salida. Si el usuario pidió reducir el movimiento en su sistema, el sitio tiene que ofrecerle una versión con menos desplazamiento.

En resumen

Las animaciones que te dejan mirando no salen de una herramienta secreta. Salen de cinco capas conocidas —CSS, Lottie, Rive, GSAP y WebGL— combinadas con criterio. Las herramientas hoy son gratis o baratas; hasta GSAP, que era el estándar pago de la industria, dejó de costar plata.

Lo que sigue costando es saber qué se mueve, cuánto dura y por qué. Ese trabajo es el de siempre: timing, peso, intención, jerarquía. Si eso lo tenés, el navegador es un formato más.

Elegí hoy un sitio que te haya gustado y desarmalo: mirá qué se mueve al scrollear, cuánto tarda cada transición y qué pasa cuando pasás el mouse por encima. Después animá un ícono simple y exportalo a Lottie. En una tarde pasás de mirar a producir.

Si querés ese criterio ordenado en un camino en vez de suelto en tutoriales, es exactamente lo que armamos en Koncepto Skool, nuestra comunidad de formación. Tenés 7 días gratis para probarla y ver la ruta completa por dentro.

Aclaración: Koncepto Skool es un producto propio.

Fuentes

• MDN Web Docs, CSS scroll-driven animations, consultado 2026-07-26, https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations
• MDN Web Docs, prefers-reduced-motion, consultado 2026-07-26, https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
• web.dev (Google), How to create high-performance CSS animations, consultado 2026-07-26, https://web.dev/articles/animations-guide
• web.dev (Google), prefers-reduced-motion: Sometimes less movement is more, consultado 2026-07-26, https://web.dev/articles/prefers-reduced-motion
• GSAP, Pricing, consultado 2026-07-26, https://gsap.com/pricing/
• Airbnb, lottie-web, consultado 2026-07-26, https://github.com/airbnb/lottie-web
• Rive, Rive as a Lottie alternative, consultado 2026-07-26, https://rive.app/blog/rive-as-a-lottie-alternative
• LottieFiles, LottieFiles or Rive: Which One Fits Your Needs Better?, consultado 2026-07-26, https://lottiefiles.com/blog/lottie-animations/lottiefiles-or-rive