Making Things Wiggle With Rive (Professionally)

*Click any image to quickly cycle through

Summary

Most apps and sites today feel like they're in a custody battle for your attention. Buttons are screaming, banners are blinking, someone's always trying to sell you something — it's chaos.

And honestly, one of the best ways to gently win someone's attention (and keep it) is through good animation. Not “Las Vegas casino” animation — I mean smooth, meaningful motion that makes the whole experience feel alive.

Discovery
& Research

Previously, I was mostly relying on CSS animations and the occasional JavaScript/GSAP just to move things into the viewport.

And while that did work quite well, it also meant a lot of coding, tweaking, adjusting, breaking, crying, fixing, and then breaking again. The truth is…

I'm a visual person. I'd rather design the thing than fight with syntax just to make a button slide 4 pixels to the left. So naturally, this pushed me into the great hunt for “a better way.”

Enter: The Animation Rabbit Hole

So I went hunting. I tried all the usual suspects:

Lottie
CSS animations
Framer Motion
A couple of GitHub boilerplates I definitely shouldn't have trusted
And a few experiments involving too many keyframes and not enough patience

But Rive? Rive was the one that felt like it understood what I needed — flexibility, interactivity, and an interface that doesn't make me want to yeet my computer.

And most importantly it is compatible with every implementation I wanted to do.

So… What is Rive?

In the simplest terms: Rive is where you design your animations, wire them up with logic, and then hand them off to your app or website without the whole thing catching fire. You get a visual editor (yay), state machines for logic (still yay), and exports that work on mobile, web, and basically anything that has pixels.

Rive animation editor showing plant illustrations and keyframe timeline

Test 1

Working with Native Apps

Let's make some plants move

This whole project actually started with a small design competition in a UI/UX Discord channel. The rule was simple (and slightly unhinged):

Design an all-in-one-screen app for managing plant health with no navigation.

Designing the idea in Figma

Before anything moved, grew, or wiggled, I laid everything out in Figma — how the interface behaves, how gestures work, etc. I wanted the UI to feel simple even though the interaction model was… not simple at all.

Planning Animations

I moved into Rive and built each plant with an idle animation using mesh warping (for actual projects, this should be built with individual elements to make the animation smoother).

Once the plants were done, I recreated the entire “planting sequence” with Rive so each animation could be triggered independently, and I went ahead and made the splash screen.

Plant placement with components

Splash screen animation

Idling plant animation

Planting animation

Setting up the State Machine

I included logic that will trigger how and when each animation will play — keeping one main Rive artboard as the start for all animations to run through.

Bringing Everything Together

To make testing smooth, I built the prototype in Swift so I could instantly test it on my ✨iPhone✨.

With the help of Anti-Gravity, I recreated the entire UI in Swift using the Figma screens as references. The layout came together fast. After that I hooked up the animation triggers to the interactions.

Test 2

Using Rive to Give Motion to Web

Helping some boxes stand out

This started as a pretty standard request: “Can we have a bento-style section that explains a few key things?”

And yes, I could have shipped a normal grid with icons and called it a day. But I wanted it to feel more alive — subtle motion, little moments, the kind of thing that quietly holds attention without screaming for it.

Figuring Out What the Bento Needs to Say

Before I drew anything, I nailed down the content.

Each bento card needed a clear purpose. This part sounds boring, but it saves you later — because you're not designing “vibes,” you're designing meaning.

Bento section layout showing service descriptions with placeholder illustrations

Trying the Illustration Styles on Figma

Next, I explored different illustration styles on Figma. Here I tested:

Illustration complexity — too much looks busy, too little looks unfinished
Line thickness / stroke style
How it reads on different breakpoints
Consistency — each card should be unique, but still look like it's from one family

Once I landed the final look, I built the bento components cleanly on Figma so they're easy to reproduce in Rive — being very mindful of shadows and other style elements.

Rebuilding It on Rive

Then came the fun part: bringing the illustrations alive on Rive. At this stage, the goal wasn't to make it look like a cartoon — it was to make it feel responsive and premium.

So the animation choices were subtle:

Small loops
Gentle movements
Little “breathing” motions

Shipping It to the Website

Once the animation was ready, I exported it and hooked it into the site.

The win here is I didn't have to rebuild the animation with CSS or Webflow interactions. Rive handled the motion, Webflow handled the layout — everyone stayed in their lane.

Next Steps

So far, most of my Rive work is focused on interaction, delight, and visual clarity. The next step is pushing that same motion language into places where things get… complicated.

Data-driven animations: I want animations that respond to real data — not just taps and hovers. Think states driven by loading, errors, progress, success, empty screens, and everything in between. Animations that actually explain what's happening instead of just being ornamental.
Rive inside complex SaaS products: Dashboards, admin panels, dense interfaces — the places where animation is usually avoided. I want to explore how subtle, intentional motion can reduce cognitive load in complex tools without slowing users down.
Deeper state machine logic: Going beyond simple boolean triggers into layered states, conditions, and transitions that scale. Basically: fewer hacks, more structure.

Animation doesn't have to be loud to be powerful.

My goal moving forward is to make motion feel useful, not just impressive — especially in products that people use all day. If the past projects were about learning what's possible, the next ones are about learning what's practical.