Desbloquea el movimiento impulsado por GSAP, visualmente en Webflow

Hemos estado muy ocupados desde que anunciamos la adquisición de GSAP el otoño pasado. A finales de abril, nos encantó hacer que GSAP fuera 100% gratuito para toda la comunidad web. Y hoy, nos emociona lanzar una nueva versión de Webflow Interactions, reconstruida sobre GSAP. Esto permite a todos los diseñadores y desarrolladores de Webflow crear visualmente animaciones fluidas, expresivas y de alto rendimiento, potenciadas por el mejor motor de animación de la web.

Webflow fue una de las primeras plataformas del mundo en hacer posible que cualquiera pudiera crear interacciones y animaciones web robustas de forma visual. Ahora, con GSAP integrado directamente en Webflow, ofrecemos un poder y un control creativo sin precedentes sin necesidad de usar código. Puedes lograr animaciones complejas y personalizadas, como efectos de escalonamiento y división de texto detallada, más fácilmente que nunca, y en una intuitiva línea de tiempo horizontal que establece un nuevo estándar para el desarrollo de movimiento visual. Webflow Interactions con GSAP permite a nuestros clientes crear animaciones de primer nivel sin sacrificar la velocidad de creación, ¡y esto es solo el comienzo!

El movimiento bien pensado es la cúspide de la diferenciación creativa y de marca

A medida que los elementos visuales inundan los canales digitales, las experiencias estáticas a menudo no logran establecer conexiones rápidas y significativas con los usuarios. Sumado a la creciente popularidad del diseño homogéneo por IA en el desarrollo web y a la disminución de la capacidad de atención de los usuarios en línea, las empresas sienten la presión de destacar.

El movimiento estratégico y los elementos interactivos ya no son opcionales; son fundamentales para la forma en que las marcas cuentan sus historias, convierten visitantes y crean conexiones duraderas. Cuando un narrador visual crea estas interacciones a mano, ofrece una calidad inconfundible que proviene de la intención y el cuidado humano, algo que ninguna IA puede reproducir auténticamente. Si bien la IA destaca en velocidad, solo los creadores humanos pueden aportar el juicio matizado necesario para elaborar un movimiento que se sienta intencional, guíe a los visitantes de forma intuitiva y cree ese tipo de experiencia elevada que convierte a los navegantes casuales en clientes comprometidos.

Es por eso que, juntos, Webflow y GSAP están democratizando el desarrollo de movimiento visual sofisticado. Y hoy, estamos sentando las bases para la próxima generación de Webflow Interactions con un primer lanzamiento importante que servirá tanto a diseñadores y desarrolladores como a agencias.

Lo que lanzamos hoy

En este lanzamiento inicial de las nuevas interacciones de Webflow con GSAP, ofrecemos:

• La capacidad de crear animaciones sofisticadas y de alto rendimiento impulsadas por GSAP, sin escribir una sola línea de código.
• Un flujo de trabajo completamente reinventado que incluye una línea de tiempo horizontal y controles diseñados específicamente que brindan a los diseñadores y desarrolladores una precisión quirúrgica sobre sus animaciones, sin comprometer la velocidad.
• La capacidad de reutilizar interacciones en todo tu sitio, eliminando el trabajo repetitivo e impulsando la consistencia.

Para obtener más detalles y ver lo que nuestros clientes y socios ya dicen sobre las interacciones con GSAP, sigue leyendo.

Crea visualmente interacciones impulsadas por GSAP

Los diseñadores y desarrolladores de Webflow ahora pueden crear visualmente interacciones fluidas, confiables y de alto rendimiento con la seguridad de que el código GSAP, el mejor de su clase, se ejecuta en segundo plano para todas ellas. Y con este primer lanzamiento, podrás animar con algunas de las capacidades más demandadas de GSAP sin escribir una sola línea de código, incluyendo:

• SplitText, que te permite animar con precisión cada carácter, palabra o línea de forma independiente, como revelar contenido gradualmente para generar suspenso o atraer al lector hacia palabras o frases clave para enfatizarlas.
• Staggers, que te permite animar sin esfuerzo grupos de elementos (como tarjetas o enlaces de navegación) con un efecto secuencial retardado, creando una entrada sofisticada y guiando la mirada del visitante.
• ScrollTrigger, que te permite transformar incluso la página más estática en una experiencia dinámica, que se despliega y se controla intuitivamente mediante el desplazamiento del visitante.

¡Echa un vistazo a lo que Joseph Berry, un socio certificado de Webflow, construyó usando interacciones impulsadas por GSAP, aprovechando todas las características mencionadas anteriormente!

"La unión de GSAP y Webflow se siente como un sueño que he tenido durante años hecho realidad. Desde el primer momento, esta última versión de Webflow Interactions cambia las reglas del juego por completo; nada más se le acerca. Cambia totalmente nuestro flujo de trabajo, permitiéndonos enfocarnos en ofrecer animaciones de siguiente nivel para nuestros clientes de manera más rápida y creativa, sin profundizar en desarrollos personalizados complejos. Las posibilidades parecen infinitas y, sinceramente, esto es solo el comienzo".

‍ — Joseph Berry, fundador de JB Studio y SkinGame Media

Anima más rápido en una nueva línea de tiempo horizontal con controles intuitivos y avanzados

Hemos transformado por completo la experiencia de usuario para crear interacciones, incorporando una línea de tiempo horizontal para crear interacciones y secuencias extendidas, un estándar de la industria para los expertos en diseño de movimiento. Con esta interfaz más intuitiva, los usuarios tienen una representación visual clara de las secuencias de animación, los tiempos y las curvas de aceleración. Esto es lo que desbloquea:

• Secuenciación visual intuitiva: Una línea de tiempo horizontal con bloques de acción facilita más que nunca la secuenciación y orquestación de animaciones complejas, ya sea en paralelo o en serie.
• Control y temporización de precisión: Obtén un control preciso sobre la temporización, la reproducción y el desplazamiento de las animaciones directamente en la línea de tiempo, con la facilidad de arrastrar y cambiar el tamaño de los bloques de acción y numerosos atajos de teclado para mayor eficiencia y accesibilidad.
• Exploración y refinamiento sin esfuerzo: Navega por secuencias de animación complejas con funciones fluidas de zoom, desplazamiento y arrastre, lo que permite una iteración y un refinamiento rápidos de los efectos de movimiento.

Con esta nueva experiencia, también presentamos una serie de nuevas y potentes capacidades.

• Disparadores de interacción ajustados con precisión: Logra que tus interacciones sean perfectas con una configuración robusta y específica para cada tipo de evento: clics, desplazamiento del ratón, carga de página y scroll. Y para un control creativo aún mayor, tras diseñar visualmente una animación, los desarrolladores pueden activarla mediante código personalizado.
• Segmentación avanzada de elementos: Segmenta elementos con combinadores CSS para animar descendientes, ancestros o hermanos específicos en diseños complejos, lo que permite interacciones altamente sofisticadas y matizadas.
• Controles diseñados específicamente para repetir y escalonar animaciones: Crea fácilmente animaciones repetitivas o revelaciones secuenciales atractivas con solo unos clics, como una flecha que pulsa o tarjetas que aparecen una a una.
• Animaciones basadas en clases: Activa cambios de estilo completos con una sola interacción añadiendo, eliminando o alternando clases, lo que hace que sea rápido y escalable aplicar estados o temas personalizados.

Reutiliza interacciones preconfiguradas en todo tu sitio

Nos lo pediste y te escuchamos. Las interacciones ahora se pueden reutilizar en todo tu sitio de Webflow. Con esta nueva versión de Interactions, podrás definir una interacción una vez y aplicarla a varios elementos o clases en todo tu sitio web, ahorrando un tiempo valioso y ayudándote a mantener la coherencia del diseño.

¡Pero eso no es todo! Ahora puedes guardar tus propias acciones personalizadas como ajustes preestablecidos reutilizables a través del panel de Interactions. Esto significa que no estarás limitado a activar o segmentar una sola interacción en varios elementos; tienes la flexibilidad de aplicar el mismo efecto de animación en interacciones totalmente diferentes. Imagina diseñar un efecto de desvanecimiento único una sola vez. Ahora, puedes reutilizar ese mismo ajuste preestablecido sin problemas para una animación de scroll de página, una interacción al pasar el ratón o cualquier otro elemento dinámico de tu sitio.

Estamos muy emocionados de poner este lanzamiento inicial en tus manos y conocer tu opinión. Tus comentarios darán forma directamente a cómo seguimos ampliando estas capacidades impulsadas por GSAP, siempre con un enfoque en el rendimiento, la escalabilidad y la reutilización. Queremos que las animaciones web de alta calidad sean tu ventaja competitiva, no una carga técnica.

"Integrar GSAP directamente en Webflow es un salto revolucionario que se siente como un truco de videojuego: el ecosistema GSAP está a solo un clic de distancia, en una interfaz visual encantadora y sin código. Puedo crear prototipos de animaciones de alto nivel en minutos, previsualizar todo en vivo en el viewport —sin necesidad de volver a publicar— y poner en marcha interacciones reutilizables que potencian cientos de páginas al instante. Es un impulso masivo a la productividad y la creatividad que ha transformado todo nuestro flujo de trabajo".

‍— Thomas Bosc, desarrollador web principal en Lattice

¿Qué sigue?

Este lanzamiento sienta las bases para la próxima generación de Webflow Interactions, que desbloqueará superpoderes de animación visual para todos, ya seas diseñador, profesional del marketing, desarrollador o agencia. En los próximos meses, seguiremos ampliando Interactions con más funciones de GSAP y reforzaremos las integraciones tanto con la plataforma de marketing web de Webflow como con herramientas de diseño de terceros. Esto incluye:

• Diseño de movimiento inclusivo: Apoya la accesibilidad y respeta las preferencias de movimiento de los visitantes de tu sitio —como "reducir movimiento"— directamente desde el panel de Interactions.
• Capacidad para activar/desactivar interacciones según diferentes contextos de diseño — como puntos de interrupción específicos.
• Mayor interoperabilidad con los sistemas de diseño escalables de Webflow, como la capacidad de establecer instancias de componentes individuales como disparadores o destinos de animación, establecer un valor de variable en una interacción, soporte para Bibliotecas Compartidas y más.
• Compatibilidad con flujos de trabajo de colaboración avanzados como ramificación de páginas y registros de actividad del sitio.
• Integración con herramientas de diseño de terceros populares como Spline, Lottie y Rive.
• Soporte para herramientas GSAP adicionales muy solicitadas como ScrambleText, Text, ScrollSmoother, ScrollTo — y mucho más por venir.

Webflow y GSAP han unido fuerzas para revolucionar la animación web, dotando a todos de las herramientas necesarias para dar vida a sus visiones más creativas. Este lanzamiento es solo el comienzo, y tenemos muchas más actualizaciones emocionantes planeadas para Webflow Interactions en los próximos meses. ¡Mantente atento!

Empieza hoy mismo

Webflow Interactions con GSAP ya está disponible para todos los usuarios de Webflow sin coste adicional, desde los planes Starter hasta los Enterprise. Para saber cómo empezar a animar con esta nueva versión de Interactions, visita nuestro Centro de Ayuda.