Rive FAQ Navigation, Designed and Built with Vanilla JS

I had one idea: a design where the film moves. Not the kind of film that plays inside a video player — the kind that is the navigation. Films and producers are inseparable, so the natural home for the idea became a producer-facing FAQ section. The strip is the nav: a horizontal film strip that scrolls between four categories — General, Leaderboard, Engagement, Uploading — and the FAQ accordion below it reflects whatever section the strip lands on.

Live demo: filmnav-project.vercel.app

Rive — animation, state machine, ViewModel data binding, solos

HTML / CSS / Vanilla JavaScript — UI design and integration

The animation is built entirely with data binding components and solos — no legacy state-machine inputs are wired up.

Artboard: Faq 2, configured with Rive auto-layout

State Machine: FAQ state machine — two layers, one for the looping film-perforation background motion, one for section-to-section navigation transitions

ViewModel: faq, auto-bound at runtime. Eight Trigger properties expose every transition the host page can request

Listeners: chevron click targets baked into the artboard fire native Rive Events

Solos: drive the section label inside the strip — only one of General / Leaderboard / Engagement / Uploading is visible per state

The biggest problem was that the animation kept rendering like a squashed image instead of adapting to its space. I worked through it one possibility at a time — checking the Rive file, the runtime, my setup — until I traced it back to my own CSS: I'd locked the container to a fixed size, so the animation had nothing to flex into. Gave it room to breathe, and it instantly behaved. The lesson stuck: the animation only adapts as much as the space you give it.

When a chevron is clicked, the Rive state machine plays its section transition over 45 frames at 60fps. The FAQ accordion below has to feel like part of the same gesture, not a separate event.

I split the accordion's response into two phases timed to the Rive transition:

Frames 0–26 — outgoing section animates out. Each FAQ row fades and slides 6px in the direction of travel — up for forward nav, down for back. Staggered 3 frames apart. The last row finishes leaving on frame 26.

Frames 27–45 — incoming section animates in. New rows fade and slide 8px from the opposite direction, staggered 2 frames apart. The fifth row settles on frame 45 — the exact frame Rive's strip animation lands.