This website uses a single, 51kb Rive file as its background, with 5 separate layers of animation, whose inputs are controlled by various Webflow interactions.
Note: The Rive file has a custom aspect ratio matching the original artboard to make sure it's responsive.
While scrolling, a Webflow interaction changes the value of a number input in the Rive file called 'Snaking', which triggers the growth of colourful snaking pipes across the page.
These paths were drawn with the pen tool and given the stroke property 'Trim > Sequential', which takes percentage values for the start and finish of the stroke.
Two timelines key these stroke properties at 0 seconds:
TIMELINE 1. START: 0%, END 5%.
TIMELINE 2. START: 0%, END 100%.
In the State Machine a blend state mixes these two timelines at 0 and 100, controlled by the 'Snaking' number input.
As you scroll through each section, the squares on the background move between two different positions.
Again there are two timelines, where, keyed on 0 seconds, these squares each have two different positions.
In this case a Boolean input controls them, called 'Position Switch'. When 'false' the State Machine (in a new layer) tells them to move to the Position 1 timeline, and when it is 'true', Position 2.
In Webflow this is controlled with 'Scroll into/out of view' interactions on the Inner Content Wraps.
As you move your mouse in the viewport, the Giant Breathing Amorphous Blob (GBAB) reacts to its movement. This is given some 'smoothing' through Webflow.
In Rive, two pairs of timelines and blend modes in individual State Machine layers control this. There are separate pairs for moving the vertices of the blob horizontally and vertically.
In Webflow, a 'Move mouse in viewport' interaction controls the values as the mouse moves around the viewport.
A Boolean in Rive called 'Light Mode' controls the background colour, shifting between dark and light backgrounds, with yet another pair of timelines, and another State Machine layer.
A native Webflow interaction on the switch below changes this Boolean, as well as several variable values in Webflow. The Rive interaction triggers along with the native ones.
WARNING: MAY SCALD THE RETINAS OF NOCTURNAL ANIMALS
Finally, there is some non-interactive movement on the squares and GBAB. This is achieved with a simple, single timeline in Rive that loops over seven seconds using 'scale'.
The state machine layer for this simply has to point from entry to this timeline, and the loop then plays by default without anything in Webflow. It still blends nicely with the mouse movement animation as I'm addressing different properties.
The idea here is to demonstrate how you can use a single Rive animation with multiple effects controlled in Webflow. Would you want to do this particular effect on a real site? Probably not. But maybe this will help you consider the possibilities.
Follow the links below to Clone the Webflow site or Remix the file from the Rive community. Thank you for your attention.
-fry