Rive animation for Motion Flux

Motion Flux came to us with a finished motion design: glowing light rays sweeping across a dark background, made in After Effects and Illustrator. They needed it to run live on a Webflow site, react to scrolling, and keep moving when nobody scrolls.

The source files couldn't be brought into Rive as they were. Only basic shapes came through, and the gradients, blurs and glows came out as flat images. We rebuilt the whole scene by hand in Rive, using the After Effects file as a guide for how the light should look and move.

Scroll position feeds one number into the animation, from 0 to 400.

0 is the start, 400 is the end, and everything in between blends smoothly.

Scrolling down moves the rays across the screen. Scrolling back up reverses them.

Separately, the light sweeps and gradients loop the whole time, so the background stays alive even when the page is still.

We shared progress as we went. After the first preview, the team clarified that the light should always be moving, and scrolling should only change the rays' angle and position. We split those into two layers: a constant loop plus scroll-driven movement.

We delivered the Rive source file, the .riv file for the website, and a video preview. When the agency put it on their staging site, two issues came up:

It didn't look like the preview. Rive's Webflow integration doesn't draw the soft glow effects, and they need Rive's own renderer. We pointed the agency to the fix.

It stopped at 2134px wide, so it looked cut off on widescreen monitors. We sent a resized version.

Rive source file

.riv file for the website

Video preview

Resized file for widescreen displays