Transforming Animation: From Basic Interactivity to Dynamic UI

Transforming Animation: From Basic Interactivity to Dynamic UITransforming Animation: From Basic Interactivity to Dynamic UI

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Gabriele Mo

pro

• Feb 2

BEFORE vs AFTER

I revisited one of my early Rive projects from 2024, when I was just starting out and Tadej Pogačar was dominating the cycling season. Back then, I challenged myself to build a fully interactive character that could change speed and jersey based on user input.

Two years later, I wanted to take it further. I added more depth with gradients and feathering, created a controllable shadow using data binding, and redesigned the layout to be more poster-like and adaptive. The UI is now fully interactive, with hover and click animations.

I like it much more now. I am curious to hear your thoughts! 🚴🏼 🔥

Rive beforeafter riveanimator

Celia I BEFAR Productions

max

• Feb 2

The evolution 🔥

Adonis Demetriou

• Feb 3

wow, wonderful!

Val Guerra

pro

• Mar 11

Filter process animation powered by @Rive What do you think?

design motiongraphics Rive

Sahil Dobariya

pro

• Mar 12

Everything feels so high-end.

Jahgrant Aiyedun

pro

• Mar 11

Created Knob interactive animation on Rive and designed on Figma

Rive Animation Figma

Akinkunmi Ayo

pro

• Mar 11

amazing work

Mayte CG

• Mar 11

I’m kicking off a two‑part, step‑by‑step Rive guide on how I built Wavy Tiles, the interactive grid you may have seen me posting about lately.

https://www.linkedin.com/pulse/wavy-tiles-step-by-step-guide-rive-pt-1-mayte-cg-oijie/?trackingId=lF6f8PNhQCGOInKZ21pFfg%3D%3D In Part 1, you’ll see: ● How to build the script‑driven grid and data model ● How to add the press‑and‑drag interactions ● How to add a rainbow color wash ● And how to work with a project_specs doc, a workflow trick I’ve been experimenting with If you’re starting out with Rive scripting, this one's for you. Stay tuned for Pt 2, where we’ll connect custom artboards to the grid, and I’ll break down how I built my eyeball design, including the pupil dilation and gaze animations 👁️ Happy Scripting!

Rive Rive Animation aidesignflow

linkedin.com

Wavy Tiles: A step-by-step guide in Rive (Pt. 1)

Welcome back! In this two‑part guide, I’ll walk you through the full process of building my project Wavy Tiles in Rive: an interactive grid of tiles that react to pointer input with translation, rotation, scale, and color effects, resulting in a slightly trippy and weirdly satisfying result. In Part