El almanaque del animador: una guía visual de las funciones de easing en Webflow

Llevábamos tiempo con este proyecto de funciones de easing guardado en nuestra cuenta. Lo usamos como una buena guía visual cuando estábamos empezando con Webflow. Al toparnos con él el otro día, nos pareció buena idea desarrollarlo un poco más y compartirlo como una guía visual de las funciones de easing predeterminadas de Webflow. Más abajo encontrarás una guía visual, un enlace a un cloneable más completo y una lista de las funciones de easing disponibles con una descripción de lo que hace cada una. Pero empecemos con un poco de historia de las funciones de easing.

Las raíces matemáticas

En el corazón de las funciones de easing hay una sólida base matemática. El concepto de easing se remonta al estudio de la física y el cálculo, donde los principios de aceleración y desaceleración gobiernan el movimiento de los objetos en el mundo real. Matemáticos y físicos desarrollaron fórmulas para describir estos movimientos naturales, sentando las bases de lo que con el tiempo se aplicaría a la animación digital. Las funciones cuadrática, cúbica, cuártica y quíntica, entre otras, ofrecen una base matemática para simular las sutilezas del movimiento y la velocidad, y permiten que las animaciones superen las limitaciones de la progresión lineal.

La evolución en la animación

La transición de las matemáticas a la animación comenzó con las técnicas tradicionales dibujadas a mano. Los primeros animadores, como los de los días pioneros de Disney, aplicaban de forma intuitiva los principios del easing para dar vida a sus creaciones, mucho antes de que se acuñara formalmente el término "easing". Observaban el movimiento del mundo real y captaban su esencia fotograma a fotograma, para crear animaciones que fluían con naturalidad y transmitían emoción y carácter. Esta meticulosa atención a la dinámica del movimiento sentó las bases de las funciones de easing, aunque en aquel entonces todo se hacía a mano.

La revolución digital

Con la llegada de los gráficos por ordenador y la animación digital, los principios del easing encontraron un terreno nuevo donde florecer. La era digital permitió controlar y manipular con precisión las curvas de movimiento, de modo que animadores y diseñadores pudieron implementar funciones matemáticas complejas con facilidad (el juego de palabras es intencionado, ya que "easing" viene de "ease", facilidad). El software empezó a incorporar estas funciones de easing y ofreció a los usuarios opciones predefinidas como "ease-in", "ease-out" y "elastic" para animar objetos de forma visualmente atractiva.

Funciones de easing en el diseño de interfaces de usuario

La aplicación de las funciones de easing fue más allá de la animación tradicional y encontró un papel importante en el diseño de interfaces de usuario (UI) y de experiencia de usuario (UX). A medida que las interfaces digitales se hicieron más interactivas, los diseñadores reconocieron la importancia de las funciones de easing para que las transiciones resultaran más naturales e intuitivas. La expansión suave de un menú, el rebote de una notificación o la aparición gradual de un cuadro de diálogo. Todas estas interacciones se beneficiaron de las funciones de easing, que mejoran la experiencia del usuario al imitar la fluidez del mundo natural.

El lienzo digital de hoy

Hoy, las funciones de easing son una herramienta indispensable en el kit de cualquier diseñador digital, integradas en plataformas de diseño web como Webflow, en librerías de animación y en software de diseño de UI. Ayudan a los diseñadores a crear experiencias digitales inmersivas y atractivas que capturan la imaginación del usuario y retienen su atención. De las ecuaciones matemáticas del pasado a las páginas web interactivas de hoy, las funciones de easing han viajado a través del tiempo, evolucionando y adaptándose, pero su misión esencial sigue siendo la misma: dar vida al mundo digital, haciéndolo tan rico y dinámico como el mundo que hay al otro lado de nuestras ventanas.

Actualización: ahora existe una versión de esta guía para GSAP

La guía visual de más abajo muestra las funciones de easing predeterminadas de Webflow (las clásicas de IX2) tal y como eran en el momento de escribirla. Desde entonces, Webflow adquirió GreenSock y GSAP ahora es gratuito y viene integrado en las interacciones más nuevas de Webflow, así que hemos creado una guía complementaria: Una guía visual del easing de GSAP ↗

Cubre todo el vocabulario de easing de GSAP con ejecutores interactivos en vivo para cada curva: la escalera de potencias (power0 a power4) asociada a los nombres de Penner que ya conoces, los suaves (Sine, Expo, Circ), los de personalidad (Back, Elastic, Bounce) y los extras exclusivos de GSAP que el easing tradicional nunca tuvo (RoughEase, SlowMo, CustomEase, CustomBounce, CustomWiggle). Incluye una carrera de easings lado a lado, código para copiar y pegar en cada tarjeta y una tabla de equivalencias completa que asigna cada easing entre Webflow, GSAP, Penner y CSS.

Si estás animando con las interacciones más nuevas de Webflow basadas en GSAP, empieza por ahí. La guía clásica de Webflow que sigue abajo sigue siendo válida para el trabajo con IX2.

Si ya conoces un easing de Webflow por su nombre, aquí tienes su equivalente en GSAP: Ease Out Quint es power4.out, Ease In Out Cubic es power2.inOut, Ease Out Back es back.out(1.7), Ease Out Elastic es elastic.out(1, 0.3) y Out Bounce es bounce.out. Linear es none y el easing predeterminado de GSAP es power1.out.

<iframe src="https://embed-webflow-project.milkmoonworkers.workers.dev/webflow-visual-interactio-ea9b724b097f9" style="width:100%; height:600px; border:none;" allowfullscreen></iframe>

Puedes desplazarte por la interacción de arriba o ver el proyecto completo y cloneable aquí.

Por fin llegamos a lo importante: ¿qué hace cada función de easing?

Linear (none)

• Origen y significado: Tan recta como una autopista en el desierto. Linear implica una tasa de cambio uniforme: sin aceleración, sin desaceleración, solo un ritmo constante de principio a fin.
• Qué hace: Mueve o desvanece objetos a velocidad constante. Perfecto para quienes aprecian la sencillez y la previsibilidad en sus animaciones. También es el easing que conviene usar para bucles infinitos, como el ticker tape basado en CMS que construimos.

Ease

• Origen y significado: Piensa en meterte poco a poco en un baño caliente. Empieza despacio, se acelera y luego vuelve a frenar, ofreciendo una transición suave y reconfortante.
• Qué hace: Aporta una sensación natural a las animaciones: empieza despacio, se acelera en el medio y frena al final. Es la opción por defecto por algo.

Ease in

• Origen y significado: Como meterse de puntillas en ese baño, todo consiste en empezar con suavidad.
• Qué hace: Inicia la animación despacio y luego acelera. Ideal para elementos que salen de la pantalla, porque van cogiendo velocidad a medida que se van.

Ease out

• Origen y significado: Lo contrario de ease in, como relajarte por fin del todo en el baño.
• Qué hace: Empieza de forma más brusca y desacelera hasta detenerse con suavidad. Ideal para elementos que llegan a la pantalla: el arranque rápido resulta receptivo y el final lento da una sensación natural de fricción.

Ease in out

• Origen y significado: Combina lo mejor de ambos mundos: un inicio y un final suaves con un toque de energía en el medio.
• Qué hace: Empieza y termina despacio, con aceleración en el medio. El comodín para transiciones que deben sentirse dinámicas pero fluidas.

Quad

• Origen y significado: Quad viene de "cuadrática", que se refiere a un polinomio de segundo grado. Es como dar un paseo tranquilo que va cogiendo ritmo poco a poco.
• Qué hace: Las animaciones con una función de easing Quad empiezan despacio y se aceleran con suavidad a medida que avanzan, siguiendo una curva cuadrática. Es más sutil que algunas de sus hermanas más dramáticas, perfecta para transiciones suaves y movimientos simples.

Cubic

• Origen y significado: Procedente de "cúbica", esta función se relaciona con un polinomio de tercer grado. Imagina un coche que acelera suavemente desde una señal de stop. Arranca despacio, pero gana velocidad de forma más notable que Quad.
• Qué hace: Las animaciones Cubic empiezan aún más suavemente que Quad, pero aceleran más rápido, lo que crea una curva más pronunciada. Por eso son ideales para llamar la atención sin perder una progresión fluida.

Quart

• Origen y significado: Quart viene de "cuártica", un polinomio de cuarto grado. Es como un velocista que sale disparado de los tacos, con una acumulación gradual que desemboca en una aceleración veloz.
• Qué hace: Con una función de easing Quart, las animaciones empiezan muy despacio y luego cogen velocidad rápidamente, creando una curva de aceleración pronunciada. Es ideal para movimientos dinámicos que deben enfatizar un cambio o una llegada importantes.

Quint

• Origen y significado: Quint deriva de "quíntica", relativa a un polinomio de quinto grado. Imagina el lanzamiento de un cohete: una breve pausa en la plataforma antes de un ascenso potente.
• Qué hace: Las animaciones Quint tienen el arranque más lento de este grupo, pero después aceleran de forma espectacular, ofreciendo una curva muy marcada. Esta función es perfecta para entradas dramáticas o cuando quieres crear un fuerte impacto visual.

Sine

• Origen y significado: Sine se basa en la onda sinusoidal matemática, conocida por su naturaleza suave y oscilante. Es como el suave vaivén de las olas en una playa.
• Qué hace: El easing Sine sigue la curva suave de una onda sinusoidal, de modo que la velocidad cambia de forma gradual y armónica. Esto crea un movimiento natural y orgánico, relajante y agradable a la vista, ideal para transiciones sutiles.

Expo

• Origen y significado: Expo es la abreviatura de "exponencial", que indica un crecimiento a un ritmo cada vez más rápido. Imagina la curva cada vez más veloz de una montaña rusa mientras se precipita cuesta abajo.
• Qué hace: Las animaciones Expo empiezan de forma casi imperceptible y luego explotan en movimiento, con una curva de aceleración extremadamente empinada. Esta función es ideal para transiciones rápidas y de mucha energía que necesitan captar la atención enseguida.

Circ

• Origen y significado: Circ se relaciona con "circular" y encarna el movimiento de entrar o salir siguiendo una trayectoria circular. Piensa en el arco suave de una pelota lanzada al aire.
• Qué hace: Las animaciones con easing Circ se mueven con la suavidad y la precisión de un arco circular, empezando despacio y acelerando de una manera que resulta a la vez natural y elegante. Es perfecta para elementos que necesitan moverse o hacer una transición con gracia y fluidez.

Back

• Origen y significado: Back implica un movimiento que se pasa del punto de inicio o de fin y luego regresa, como cuando se tira hacia atrás de una honda antes de soltarla.
• Qué hace: El easing Back hace que las animaciones se pasen de su objetivo antes de asentarse en su sitio, creando un juguetón efecto de rebote. Aporta una cualidad viva y elástica a las transiciones, haciéndolas más dinámicas y atractivas.

Elastic

• Origen y significado: Elastic, como su nombre indica, encarna el comportamiento de una goma elástica que se estira y vuelve de golpe. Es la diva de las funciones de easing, con un movimiento vistoso y exagerado.
• Qué hace: Las animaciones Elastic se estiran y rebotan con una elasticidad viva y exagerada, y hacen que los elementos parezcan moverse con la energía y la flexibilidad de una goma elástica. Esta función es perfecta para animaciones llamativas y vibrantes que aportan un toque de fantasía y diversión.

Bounce, bounce past

• Origen y significado: Igual que una pelota que bota, estas interacciones imitan la física del rebote contra una superficie, y Bounce Past añade un pequeño exceso para dar dramatismo.
• Qué hace: Crea un efecto juguetón y atractivo en el que los elementos rebotan antes de asentarse en su sitio. Aporta vida y energía a la página.

Swing from to, swing from, swing to

• Origen y significado: Imagina un péndulo o un columpio. Estas interacciones capturan la esencia del movimiento de vaivén, de un lado a otro, empezando o terminando con un balanceo.
• Qué hace: Añade un movimiento de balanceo elegante a los elementos, creando una sensación de ritmo y fluidez. Ideal para llamar la atención de forma sutil y sofisticada.

Y eso es básicamente todo. La historia de las funciones de easing es una fascinante saga de innovación, un entrelazado de arte y ciencia que refleja el afán constante de la humanidad por replicar la belleza y la complejidad del movimiento en nuestras creaciones.

¿Listo para poner en práctica estas curvas de easing? Nuestro artículo sobre cómo dominar las animaciones dinámicas en Webflow muestra lo que pueden hacer en toda una página, y los controles de slider de dance of the dots son un buen ejemplo de easing para copiar. Encontrarás más proyectos para clonar y ajustar en nuestros Webflow cloneables.

Preguntas frecuentes

¿Qué son las funciones de easing?

Una función de easing controla cómo cambia la velocidad de una animación entre su inicio y su final. En lugar de moverse a un ritmo constante, un elemento puede empezar despacio, acelerar, pasarse de largo o rebotar, lo que hace que el movimiento resulte más natural.

¿Cómo elijo la curva de easing adecuada para las animaciones de Webflow?

Empieza con ease out para la mayoría de las transiciones de interfaz, porque el arranque rápido resulta receptivo y el final lento se siente natural. Usa ease in para los elementos que salen, ease in out para el movimiento a través de la pantalla y linear para bucles o cualquier cosa que deba mantener una velocidad constante. Reserva back, elastic y bounce para los momentos en los que quieras dar personalidad.

¿Siguen funcionando estas funciones de easing en las interacciones de Webflow basadas en GSAP?

Sí, los mismos nombres al estilo Penner se corresponden con los easings de GSAP. Quad, Cubic, Quart y Quint pasan a ser power1 a power4, y Sine, Expo, Circ, Back, Elastic y Bounce conservan sus nombres. La guía complementaria de GSAP de más arriba incluye la tabla de equivalencias completa.