Manipula animaciones de Rive usando interacciones con GSAP

Ahora puedes controlar animaciones de Rive directamente desde el lienzo de Webflow usando interacciones con GSAP. Solo vincula los disparadores de interacción a los datos dentro de tus escenas de Rive y estas responderán en tiempo real mientras los visitantes hacen scroll, clic o navegan.

Lo que puedes hacer hoy:

• Controla datos del ViewModel como mesas de trabajo, números, texto, colores, booleanos y enumeraciones expuestos por tu archivo de Rive.
• Transiciona entre diferentes estados de mesas de trabajo dentro de un mismo componente de Rive, permitiendo animaciones multiescena sin necesidad de múltiples incrustaciones.
• Inicia las transiciones de la máquina de estados integrada de Rive en el momento justo de tu línea de tiempo de interacción.
• Renderizado vectorial más nítido con WebGL2: la integración usa el paquete @rive-app/webgl2 más reciente, que permite suavizado vectorial para bordes con antialiasing más definidos en formas, texto y trazos.
• Los cambios de propiedades de Rive se secuencian en la misma línea de tiempo de GSAP que tus otras animaciones de Webflow, revirtiéndose limpiamente al rebobinar.

Cómo funciona en el Diseñador:

Selecciona un elemento de Rive, abre el panel de Interacciones y elige los tipos de acción "Set Rive" o "Animate Rive". Los ViewModels y propiedades de tu archivo .riv cargado estarán disponibles automáticamente para modificarlos. Colócalos en tu línea de tiempo junto a transformaciones, cambios de opacidad o cualquier otra animación. Las propiedades de color aceptan valores hexadecimales, RGB, HSL o nombres de colores y se convierten automáticamente. Los valores originales se capturan al inicio de cada interacción, por lo que la reproducción inversa siempre restaura el estado inicial.