.jpg)
Algunos briefs definen la solución. El de Frontify definió la ambición y nos dejó el resto a nosotros.
En qué se convirtió esa ambición: Frontify, una plataforma de gestión de marca, quería una historia de producto basada en scroll donde cada elemento respondiera, reaccionara y transicionara con intención: capas de interactividad funcionando al unísono, unidas por una lógica que la mayoría de los usuarios nunca notará conscientemente. Construirlo significó llevar a Rive mucho más allá de su reputación como herramienta de animación y aprovechar casi todas las técnicas que hemos desarrollado a lo largo de años de trabajo interactivo. Este artículo es un relato detallado de cómo nuestro equipo en OFF+BRAND lo logró, y una guía práctica de las capacidades de Rive que lo hicieron posible.
Por qué Rive y por qué encaja en este tipo de trabajo
Rive es ampliamente conocido por la animación de interfaces. Pero para proyectos como este —diagramáticos, interactivos y sensibles al rendimiento— se gana su lugar por razones diferentes. A diferencia del video, los elementos visuales de Rive están activos en tiempo de ejecución: responden a lo que hacen los usuarios, en lugar de simplemente reproducir una secuencia fija. Esa distinción importa enormemente cuando el objetivo es hacer que algo se sienta vivo en lugar de producido.
Hemos utilizado Rive en muchos proyectos que requieren sincronización con el scroll, seguimiento del cursor, efectos de hover e interactividad mediante clics. El brief de Frontify reunió todos esos hilos en un solo lugar.
Construyendo una línea de tiempo basada en scroll: enlace de datos, joysticks y estados de mezcla
Toda experiencia en Rive basada en scroll depende de la misma cadena fundamental: una variable de tiempo de ejecución que sabe dónde está el usuario, un mecanismo para traducir eso en movimiento y una máquina de estados para mantenerlo todo unido. Aquí explicamos cómo funciona cada pieza y cómo las ensamblamos para Frontify.
El enlace de datos es la columna vertebral de todo
La base de cualquier experiencia en Rive basada en scroll es el enlace de datos, el mecanismo que permite que las variables de tiempo de ejecución influyan en lo que sucede dentro de la animación. Para este proyecto, usamos una variable de tipo número llamada scroll_y, controlada desde JavaScript fuera del archivo de Rive. Este valor único se convierte en la columna vertebral de toda la experiencia.
La imagen de arriba muestra el conjunto completo de variables de enlace de datos utilizadas en esta pieza. La clave es scroll_y. Al ser controlada desde JavaScript, significa que el módulo de Rive está siendo impulsado por eventos que ocurren fuera de él, en el propio sitio web. Esa relación de afuera hacia adentro es lo que hace posible toda la experiencia de scroll.
Los joysticks traducen números en movimiento
Un número por sí solo no mueve una línea de tiempo. Ahí es donde entran los joysticks. Un joystick en Rive asigna un valor entre -100% y 100% a una línea de tiempo correspondiente, actuando como el puente entre un valor de enlace de datos y el movimiento real.
A partir de aquí, creamos dos nuevas líneas de tiempo: scroll_0 con el joystick configurado en -100% (el inicio), y scroll_1000 con él configurado en 100% (el final). Estas se vinculan luego a un estado de mezcla en la máquina de estados.
El resultado es una línea de tiempo desplazable: fluida, bidireccional y totalmente controlada por la posición de scroll del usuario. Los valores 0 y -1000 no son sagrados; lo que importa es la relación entre los dos estados, no los números específicos.
Trabajando con componentes: remapeo, líneas de tiempo anidadas e higiene de archivos
Un archivo de Rive complejo puede volverse difícil de manejar rápidamente, especialmente cuando docenas de módulos llevan su propia lógica de animación. La forma en que gestionamos esa complejidad se reduce a tres cosas: cómo estructuramos los componentes, cómo los conectamos a la línea de tiempo principal y cómo mantenemos el tamaño del archivo bajo control a medida que el proyecto crece.
Los componentes evitan que la complejidad se acumule
Con muchos módulos ejecutando su propia lógica interna, los componentes fueron esenciales no solo para la reutilización, sino también para la legibilidad. Cada módulo vive en su propio componente con su propia línea de tiempo, lo que significa que la escena principal se mantiene limpia y cada pieza sigue siendo manejable de forma independiente.
Remap es la forma en que el padre controla las partes
Para controlar las líneas de tiempo internas de los componentes desde el desplazamiento principal, usamos remap: un sencillo mapeo de 0 a 100% que dicta cuánto avanza la línea de tiempo interna de un componente según la posición de la línea de tiempo principal. Es una de las herramientas más ordenadas del kit de Rive y permite que un solo valor de desplazamiento se propague a todos los módulos simultáneamente.
Un componente, muchas formas: un enfoque más inteligente para las rutas de las flechas
Las rutas de las flechas animadas requerían algo más que solo remap. Una vez que una línea se había dibujado completamente mediante el desplazamiento, queríamos que pasara a un estado de reposo en bucle: una línea que fluye continuamente y comunica actividad sin necesidad de que el usuario siga desplazándose.
El desafío: cada flecha tiene una forma, un punto de inicio y una curvatura diferentes. En lugar de crear componentes separados para cada variación, usamos la herramienta "editar vértices" para crear una línea de tiempo independiente para cada forma de ruta dentro de un único componente de flecha "base". Cada línea de tiempo define una posición inicial, una posición final, un nodo adicional a lo largo de la línea y toda la información de ángulo necesaria para coincidir con los diseños. El componente principal selecciona la línea de tiempo de ruta adecuada mediante remap, manteniendo bajo el número de componentes y ligero el tamaño del archivo.
Este es solo un ejemplo, pero el elemento clave es cómo escala este enfoque. Aplícalo de forma coherente en un archivo complejo y las optimizaciones del tamaño del archivo se multiplican: menos componentes, menos redundancia y mejor rendimiento donde realmente importa.
Trim path es lo que hace que la línea cobre vida
Con la arquitectura de rutas establecida, la siguiente pregunta era cómo hacer que la animación en bucle tuviera impulso en lugar de simplemente repetirse. La propiedad trim path de Rive es lo que hace esto posible, y es una a la que recurrimos constantemente.
La mecánica: Trim End se mueve del 0% al 100% para dibujar la línea, luego Trim Start sigue del 0% al 100% para borrarla; pero, fundamentalmente, el inicio de Trim Start se superpone con el final de Trim End, con una suavización refinada en ambos. Esa superposición es lo que transforma un ciclo básico de dibujo y borrado en algo que se percibe como un impulso continuo hacia adelante.
El bucle se activa justo antes de lo que esperarías
Para activar la animación en bucle en el momento justo, usamos entradas anidadas: booleanos (variables verdadero/falso) con la opción "exponer a la mesa de trabajo principal" activada, lo que permite que la línea de tiempo de desplazamiento principal establezca el estado interno de un componente desde fuera. (Una nota práctica que vale la pena recordar: el enlace de datos debe usarse para todas las variables conectadas en tiempo de ejecución; ahora usamos entradas exclusivamente dentro del editor).
Configuramos el activador justo antes de que la línea se complete visualmente, no en el punto final exacto. Esa ligera anticipación hace que el bucle parezca surgir del dibujo en lugar de seguirlo. Es un enfoque que aplicamos constantemente en las líneas de tiempo de desplazamiento: las condiciones establecidas un poco antes crean superposiciones; las condiciones establecidas exactamente a tiempo crean pausas.
Hay una segunda capa, y tienes que desplazarte para encontrarla
La mayoría de las experiencias interactivas se basan en un solo sistema. Frontify necesitaba dos: una capa controlada por el desplazamiento (scroll) y, al final, una capa interactiva que permite a los usuarios remezclar la composición por completo. Lograr que ambas coexistieran sin interferir entre sí fue la parte más compleja de la construcción.
Los grupos de propiedades le dan al botón su propia lógica
Al crear experiencias basadas en el desplazamiento, no todo debe revelarse mediante el scroll. Para elementos interactivos clave como los botones, el desplazamiento continuo crea un problema: el botón puede quedar atrapado en un estado intermedio, visualmente presente pero no del todo formado. Eso genera desconfianza. Un botón siempre debe sentirse como si estuviera ahí y fuera clicable, o simplemente no estar.
Así que, en lugar de vincular la visibilidad del botón directamente a la línea de tiempo del scroll, usamos un booleano de grupo de propiedades — btn-visible — que cambia a verdadero justo al final de la línea de tiempo del scroll, activando la aparición del botón en su propio árbol de máquina de estados independiente.
Ya hemos visto cómo los valores de enlace de datos pueden controlarse mediante código. Pero, ¿qué hay de controlarlos desde dentro de Rive, o incluso desde una línea de tiempo? Aquí es donde la dirección "de destino a origen" cobra importancia. En lugar de hacer que el grupo de propiedades siga al valor de enlace de datos, invertimos la relación: el grupo de propiedades lo establece.
Cuando btn-visible se establece como verdadero al llegar al final del scroll, también cambia el valor de enlace de datos a verdadero, lo que a su vez activa la máquina de estados del botón.
Desde fuera, parece un proceso largo para un detalle pequeño. Pero es en estos detalles donde la experiencia se sostiene o se desmorona. Cuando varios de ellos se combinan en una sola pieza, el resultado es una experiencia de usuario que se siente cuidada, incluso si ningún momento individual destaca por sí mismo.
Clic y scroll: una regla para evitar conflictos
Con el botón listo, debe controlar una línea de tiempo interna que corre junto a la que se controla mediante el scroll. Algo importante a tener en cuenta al trabajar así: las dos líneas de tiempo nunca deben controlar la misma propiedad. Cada una debe poseer sus propiedades de forma exclusiva. Eso es lo que les permite interactuar sin pisarse los talones.
El enfoque obvio para la línea de tiempo de remezcla serían cuatro líneas de tiempo separadas, una para cada transición: 1→2, 2→3, 3→4, 4→1. Eso funciona, pero crea algo desconectado y difícil de mantener; en proyectos activos, los ajustes son inevitables, y cuatro líneas de tiempo desconectadas significan cuatro lugares donde hacer cambios. El mejor enfoque fue una línea de tiempo central de remezcla controlada por un joystick, con cinco líneas de tiempo de un solo fotograma clave que ajustan el joystick a -100%, -50%, 0%, 50% y 100% respectivamente, representando cada una un estado distinto.
Estas cinco líneas de tiempo se conectan a la máquina de estados, haciendo transiciones entre sí cuando se cumple la condición btn-clicked. Cada transición está configurada en 1.5 segundos; esa duración es la que controla el joystick mientras se mueve a través de su rango, por ejemplo, de 0% a 50% durante ese tiempo. Usamos una interpolación lineal en las transiciones específicamente porque toda la aceleración real reside dentro de la propia línea de tiempo de remezcla, manteniendo el movimiento consistente y ajustable desde un solo lugar.
Todos estos elementos juntos dan como resultado un sistema interactivo de dos capas: controlado por scroll hacia adelante y hacia atrás desde cualquier punto del ciclo, con cambios de estado activados por clic superpuestos de forma limpia.
Tres trucos ingeniosos que vale la pena tener en tu caja de herramientas
No todo en un proyecto de Rive es una gran decisión arquitectónica, pero los detalles más pequeños a menudo tienen un impacto enorme en lo pulida que se siente la experiencia final. Aquí tienes tres técnicas de este proyecto que vale la pena guardar en tu caja de herramientas.
1. Usa el enlace de datos para gestionar el estilo del cursor en tiempo de ejecución
Rive no cuenta con control nativo del estilo del cursor en tiempo de ejecución para la web, algo vital para los elementos clicables, donde el cambio de flecha a mano da al usuario una respuesta visual inmediata. Aun así, es posible lograrlo, y es justo lo que aplicamos aquí.
Mediante el enlace de datos, cambiamos el valor booleano cursor-pointer de falso a verdadero al detectar un hover. Un controlador JavaScript captura esto y aplica el estilo CSS correspondiente, mostrando al usuario un cursor: pointer (o cualquier otro).
2. Usa un componente compartido para todos los efectos de hover
El diagrama interactivo requería que varias áreas respondieran al pasar el ratón: un sutil efecto de iluminación que añade tactilidad, permitiendo que los usuarios sientan cómo la interfaz reacciona. En lugar de crear el efecto para cada elemento, diseñamos un componente compartido.
Ese componente, controlado por un árbol de estados simple, puede colocarse en cualquier escena, estirarse para encajar y enmascararse para respetar esquinas redondeadas. Las ventajas se multiplican: comportamiento consistente, menor peso del archivo y cambios que solo se hacen una vez.
3. Encapsula las imágenes rasterizadas en sus propios componentes desde el inicio
Es sencillo, pero ahorra mucho tiempo cuando surgen ajustes. Nuestra práctica es colocar cada imagen rasterizada en su propio componente desde el principio. En árboles de capas complejos, cambiar imágenes puede ser un lío; tenerlas aisladas facilita encontrarlas y sustituirlas sin dolores de cabeza.
Las mejores experiencias interactivas ocultan su complejidad
Frontify llegó con un encargo ambicioso para su página de resumen de producto, una historia interactiva por capas que debía responder al usuario, premiar la exploración y mantenerse sólida técnicamente. Esa ambición es la que lleva a Rive más allá de sus usos habituales.
Este proyecto demuestra hasta dónde llega la herramienta cuando se trata como un entorno de diseño de interacción completo: enlace de datos conectando el exterior con el interior, separación de líneas de tiempo para sistemas coexistentes y componentes que controlan la complejidad. El resultado es una experiencia viva y fluida.
Ese es el estándar al que aspirar en cualquier proyecto de Rive. Uno que te obliga a pensar en sistemas en lugar de secuencias, a estructurar para facilitar el mantenimiento antes de que la complejidad lo exija y a construir con un nivel de destreza a la altura de tu ambición.
