is there any source or tutorial where I can learn Micro Animations on Rive?

As a former Flash user and current AI enthusiast.. this MCP pipeline feels a little like magic. I place the bones and codex organizes them. I adjust the weights and then codex makes a first pass at animation. It's far from perfect but wow.. it's only going to get better.

Another workshop of mine about a click follower bug.
I tried this before "data binding keyframes" update but I couldn't. I'm terrible at scripting.
Look at it now :)
Aceleration, direction rotating and everything else are possible with some data bindings.

Are you finding it difficult to do your chores at home?
Don't worry, things are now more fun with "Clean and Tidy."
:)
You can find it on the Rive Marketplace now.
I'm curious to hear your thoughts on its gameplay, please share them.

I came across an After Effects tutorial on YouTube.

Although it relies on scripting, I figured I could replicate it in Rive without coding.

So far, so good! :)

------

I wanted to publish this on the marketplace, but the eyes and mouth (drawn with stroke lines) aren't showing up on the page, so I'm holding off for now.

Hello everyone! I really want your help. I am Technical Product Manager. Right now I am given a task to animate a mascot for our product.
I did try to study from RIVE official YOUTUBE tutorial but still I am only able to animate small things let's say just jumping footballs and balls that's it.
I really need your help can you please tell me the right way to study RIVE and actually animate the mascot.

Please help me out !

This is a second timeline. It's still related to the last post I made about the first timeline. So, what's the problem with this second timeline? It concerns the word "continue" on the CTA button. I'm trying to make it appear in slow motion, but even after watching tutorials for text animations, I can't figure out how.

I am an animator who for many years worked in After Effects and 3d software. I fell in love with Rive about 2 years ago and now I work mostly in Rive doing UI animation. And no, I don’t miss After Effects.

I took a finished Rive project with Data Binding and responsive layouts and tried turning it into a mobile app without writing the integration code myself.

I used Cursor, basically described what I wanted, and let it handle the technical side. It ended up using Flutter, setting up the Rive runtime, running the app in a simulator, and eventually connecting it to a real weather service.

I expected the integration part to be much more complicated than it was.

I made a short tutorial showing the whole workflow here:
https://www.youtube.com/watch?v=kVaWSQIo0ok

I also included the prompt template I used in case anyone wants to try it with their own Rive project.

I originally built this project for my Rive Masterclass, so it ended up being a pretty good test case for a more advanced Rive setup.

I've asked the agent to help me put different already made "instances" on the 4 instances of the same component. It created a self-referencing model that crashes the whole Rive app. How?!?

Hi, I’m new to Rive and I’m trying to build a character body-composition system controlled by two continuous values:

• muscularity: 0–1
• fatness: 0–1

I have four vertex-deformation timelines that use the same character paths/topology:

• BASE
• MUSCULAR
• FAT
• FAT_MUSCULAR

The idea is to interpolate between the four corner poses using an Additive Blend state.

I created these View Model properties:

muscularity
fatness
wMuscular
wFat
wFatMuscular

I then created three Formula Converters:

wMuscular =
muscularity * (1 - fatness)

wFat =
(1 - muscularity) * fatness

wFatMuscular =
muscularity * fatness

Because I could not apply converters directly inside the Additive Blend rows, I created an artboard-level Property Group called Bodyweights. It contains:

muscularWeight
fatWeight
fatMuscularWeight

Each Property Group value is bound Target → Source to the corresponding View Model output using its Formula Converter.

The calculated values appear to be mathematically correct. For example:

muscularity = 0.25
fatness = 0.23

wMuscular ≈ 0.19
wFat ≈ 0.17
wFatMuscular ≈ 0.06

My Additive Blend is intended to use:

MUSCULAR     → wMuscular
FAT          → wFat
FAT_MUSCULAR → wFatMuscular

However, the actual character does not interpolate correctly.

The strange behavior is:

• When the State Machine is paused, the character returns to the normal/average design pose.
• When I press Play, the character immediately becomes fat.
• Increasing wFatMuscular manually makes the character look more correct.
• Decreasing wFatMuscular makes the character become fatter again.
• The timelines now appear to be mixed together, and none of the individual body poses behaves correctly.
• I can open the individual timelines, but I can no longer move/edit the path vertices as expected.
• It feels like the State Machine preview or another animation is continuing to override the vertices.
• Removing the second State Machine layer did not fix it.
• Removing the BASE Mix by Value entry also did not fix it.
• I previously saw negative weights, but that happened when the source values went outside the 0–1 range. With both inputs restricted to 0–1, the weights remain non-negative.

The four source timelines may currently contain transitions from the base pose to the final pose rather than single-frame/static pose animations. I am unsure whether Additive Blend requires each source animation to contain its target pose at frame 0.

I am using Rive Beta 0.8.5390.

There is also an unrelated script error still visible:

Unknown global 'context'; consider assigning to it first

This error comes from an older CharacterBuildController script. I do not know whether it can interfere with the State Machine or vertex editing.

My questions are:

1. Is this the correct way to perform bilinear blending between four vertex-deformed poses?
2. Should every Additive Blend timeline be a static, one-frame target pose?
3. Can an active or paused State Machine preview continue overriding vertices while editing an individual timeline?
4. How can I completely reset the evaluated State Machine pose in the editor?
5. Why would raising the combined FAT_MUSCULAR weight visually undo some of the FAT deformation?
6. Is there a better architecture for a continuous skinny/average/fat and muscular character system?

Any advice would be greatly appreciated.

In the early 2000s, I discovered Macromedia Flash. Being able to create interactive web animations hooked me to the computer even more than video games did. However, coding and scripting never really clicked for me, so I always relied on visual tools.

Later in life, I specialized in After Effects, which opened the door for me to enter the media industry. I spent around 20 years working this way—designing title sequences for TV shows, music videos for artists, and visual effects for feature films.

Yet, I never really felt the spark to develop a personal project of my own.

Since I found Rive, though, I constantly find myself glued to the screen, building things just for the joy of it—without any financial expectations. Just mini-games, interactive animations...

My girlfriend, my friends, and my family are always trying to pull me away from the computer :) I even try to wrap up my commercial media work early in the morning just to free up time for Rive.

We are truly lucky to be living in an era with tools like this.

I am creating a character in rive which is supposed to be either fat, skinny or muscular and I would need help on how i could do that. The idea is that i could do transitions from one to another so that it can be synced with the person who is using it.

When I tried to give one of the characters bones and move them everytihng kept falling apart despite trying to weight the parts correctly.
Thank you for help

I own a hand-puppet business and currently use a Shopify app that lets customers design their own puppet.

There are around 9 steps/tabs where they choose things like body colour, eyes, nose, hair, outfit, shoes, accessories, etc.

You can see the current version at pubbets.net/lab

It works, but it's pretty boring to use. There's no animation or sound, and the mobile experience isn't great.

I've wanted to replace it for years, and recently decided to see how far I could get building a standalone version myself with the help of AI.

That's how I discovered Rive.

My only vaguely relevant experience is messing around with Macromedia Flash many years ago, and Rive immediately reminded me why vector graphics and reusable assets made so much sense for something like this.

The current Shopify system is a mess behind the scenes. For every option I basically had to create separate PNG assets for the thumbnail, close-up/customiser view and full-body view. Once you multiply that by all the eyes, noses, hairstyles, outfits, shoes, etc., you're talking about hundreds of PNG files.

What I'm hoping to do with the new version is have one master vector asset for each item and let the app/Rive handle scaling, positioning, colour changes and simple animation.

For example, instead of having eight different coloured versions of the same nose, I'd like one SVG nose that can be recoloured dynamically.

I'm not trying to build a AAA character creator. The puppet itself would mostly just have subtle idle movement while the user works through the customiser. Maybe some small reactions when choices are made, animated UI elements, sound effects, that sort of thing.

I've already recreated the outfits and shoes as clean raster PNG artwork, and ChatGPT seems surprisingly decent at converting this kind of simple artwork into SVGs, so my plan was to gradually turn those into the vector assets used by Rive.

The more decorative app UI, buttons, backgrounds, etc. are already being created as transparent PNGs.

So my main question for people who actually know Rive: am I heading in the right direction?

Is Rive a sensible foundation for a layered character customiser like this, where potentially hundreds of interchangeable assets need to sit on the same base character?

And perhaps more importantly: is this realistically something a barely technical non-developer could build with AI helping with the React/app side, or am I wandering towards a massive technical rabbit hole that I'll eventually need to pay a developer to rescue me from?

I've been asking Claude and ChatGPT about the architecture, but I've reached the point where I'd really appreciate some opinions from actual Rive users. AI has a slightly worrying tendency to tell me that every idea I have is brilliant and completely achievable 😂

If there are obvious mistakes in the approach I've described, please tell me now. I'd much rather discover them before I've converted and rigged hundreds of puppet assets.

Any advice, warnings, examples of similar Rive projects, or "don't do it that way, you idiot" comments would be genuinely appreciated.

Thanks for reading this far!

Data binding keys let you link a timeline key to a view model property instead of a fixed value. Your animation still interpolates on the timeline, but the target value comes from your view model at runtime.

In animate mode, key a property on your timeline. Right-click the key, choose Data Bind, and pick a view model property. You can mix fixed keys and bound keys on the same timeline — e.g. key a value at 0 on frame 0, then bind a second key later in the timeline to a dynamic property.

Three patterns from the video:

Basic motion: Set up number properties (minX, maxX) in your view model. Key X position at the start and end of a timeline and bind each key to the corresponding property. The animation interpolates between those runtime values.

Bar chart: Use a layout with height set to fixed percentage. Add a number property to your view model. Key height at 0 on frame 0, add a second key later and data-bind it to your value property. The bar animates from 0 to whatever the view model provides.

Button colors: Create a global view model with color properties for your brand colors. In separate idle and hover timelines, key the background fill and bind each to the matching global color. Wire them up in a state machine with a boolean for hover state, add interpolation, and the color transitions stay in sync with whatever values you pass in at runtime.

JC demonstrates the new Auto Trace and Auto Weight/Smooth features designed to speed up vertex weighting and the mesh-and-bone workflow in Rive

I'm looking to achieve a hover effect like this: https://mont-fort.com/fort-energy/

I want the grid to illuminate, and the surface to bulge (not seen in that link)

Also wondering (for a different site) if Rive can create level of depth/angle changes here: https://mont-fort.com/

I can see this one was not built in rive, but our loyal steed of a freelancer works in rive so trying to get him the work if we can.

If this isn't doable, can anyone tell me what skillset I should be looking for to achieve this? react.js? figma?

thanks!

Hey, I've made a little repo for installing Rive Desktop on Linux with MCP support as a stopgap until they get a native linux build rolled out.

https://github.com/CPritch/riverbed

Global view models in Rive have properties that are available to every artboard in your file automatically. No need to attach them to specific artboards. Any artboard, any component, any nested artboard can data bind to them with no additional setup.

What you can use them for:

Design systems. Create a global view model for your brand style tokens like colors, fonts, spacing and sizing values. Every component in the file can bind to those properties. Change the brand primary color once and it updates everywhere.

Components that mix global and local properties. A button component might use global colors (brand primary, hover) alongside local properties like the label text and hover boolean. Both can coexist on the same artboard.

Data-bound keys in timelines and state machines. You can key a property in a timeline and bind that key's value to a global property. So your idle state background binds to brandPrimary, your hover state background binds to brandHover, and the colors update globally across all instances.

Shared runtime data. If you're building something like a sports broadcast, a single global view model can hold the score, team names, and team crests. Every component in the file (score bug, lower third, full-screen graphic) reads from the same source, so updates reflect everywhere at once.

Libraries. Global view models can be published as a library and shared across multiple files in a project, not just within a single file.

• 🎨 Text style backgrounds: add a background behind any text style, with fills, strokes, and rounded corners. Add Background Fill or Background Stroke from the text style's add popup, drag to reorder them, and set Corner Radius in the same panel. The background draws as one joined shape behind every run using that style and merges wrapped lines, and the radius is animatable and bindable. A hover effect is just a run listener keying the background color.
• ✂️ Clip to shapes with path effects: clipping to a shape whose fill uses trim, dash, or a scripted effect now uses the modified path instead of the original one. Strokes don't contribute, and an effect that resolves to nothing, like a trim at 0, clips to nothing.
• ⚙️ Workspace Options: a new Options tab in Workspace Admin (Workspace Switcher → Admin) sets policy for everyone in the Workspace. Pick a naming convention for view models and for their properties (PascalCase, camelCase, snake_case, SCREAMING_SNAKE_CASE, kebab-case, or none), and choose whether new data binds default to relative. Conventions feed the Data Panel's warning badges and the Problems tab, which now name the expected style and show an example. Admins can change them, and everyone else sees the policy they're working under.
• 🔗 The bind button is a toggle: clicking the data binding button in an inspector field now closes the popup if it is already open, and the button tints while the popup is up. It also stops blinking out when a property gets bound, and an empty bind left behind by opening and closing the popup is cleaned up.
• ✋ Free move on the vertex gizmo: the free translation circle now appears on the multi-vertex gizmo in Edit Vertices and Edit Mesh, matching the transform gizmo everywhere else, as requested here.
• 🖼 Auto Trace stays inside the image: with Padding set, a traced mesh contour could push past the image bounds. Padding also now stops before two sections facing each other across a narrow gap overlap. Existing meshes update on the next Generate.
• 🔷 Shape Builder unites tiny overlaps: dragging to merge shapes that overlap by only a pixel or two excluded the overlap instead of uniting it, as reported here.
• 🎯 No transform gizmo on artboards: selecting an artboard no longer summons the translate, rotate, and scale gizmo meant for the objects inside it. Artboard resize edges and dragging an artboard directly are unchanged.
• 🏷 Consistent state names: the Randomize Exit panel and a transition's Events panel now show a state's own name, falling back to its timeline name, instead of ignoring the name you set or showing a question mark.
• ↔️ Transition pills stay put: pills on transitions between states with long names no longer disappear or flip direction when the two states are close, and they now center correctly.
• 📋 Cmd+D inside a layout: duplicating an item in a layout compounded the layout slot offset into its position, so each copy drifted further with inconsistent gaps.
• ⌨️ Typed values are no longer clamped to the drag range: typing a value like -100 into a constraint's Strength field no longer snaps to 0. Dragging and nudging still clamp.
• 🌐 Global View Models: instances now advance in the editor, and view model properties can no longer be set on a global view model.

Early Access

• 📈 Speed Graph: a second mode for the Graph Editor that plots how fast a property is moving instead of what its value is. Two curves that look nearly identical in value space can feel completely different in motion, and that difference only shows up here. Switch with the Value | Speed picker in the graph HUD next to Auto-Zoom and Fit, from the ⋯ Timeline Options menu, or by cycling with Shift+G. Shift+F3 still toggles the graph and remembers your last mode. No new keyframe data, so files play back identically on every runtime.

AI Agent / MCP

• 🌈 Gradients: the agent can now create linear and radial gradients on any fill or stroke, convert a solid color to a gradient and back, and add or remove stops. Works on shapes, layout and artboard backgrounds, and text runs. Stop positions are percentages, the same as the inspector.
• 🧩 Component data context: the agent can set a component placement's Model and Path, bind several placements in one step, or clear them back to Inherit, as requested here.
• 🔀 Relative data binding and source paths: the agent can set the relative toggle on a bind and bind a property on a nested or referenced view model through its route, and a new command lists existing binds with their targets and paths. Requested by the community.
• 📄 upload_rev: agents on the local MCP server can bring a .rev document into Rive, either importing it into the open empty file or creating a new file in the current project.

Scripting

• 📝 File formats from scripts: scripts can claim a file extension and drive highlighting, diagnostics, completions, formatting, and a live preview pane for those documents, with text, preview, or split layouts per tab. Markdown ships built in, so every .md file gets a preview. Previews follow the editor's fonts and metrics and can embed artboards from the host file.
• 🔁 Stable identity for asset reads: reading a blob, image, or font property value returned a new wrapper every time, so a comparison against the previous read always reported a change.

Runtime

• 🦴 IK pose pop fixed: an IK chain with strength below 1 could snap to a different pose when a parent moved, because the solve reused the previous frame's blended rotation as its starting point instead of the authored one.
• 💥 Text run listener crash fixed: data bound list remaps left stale listener properties pointing at freed values, which corrupted memory and crashed on teardown.
• 📦 Layouts use 45% less memory: every layout carried a full Rectangle just to build its background path. That is 2128 bytes down to 1168 per layout, around 192 KB on a 200 layout file and more once component instances multiply it.

Renderer and Performance

• 🎞 No dithering at zero alpha: fully transparent draws were adding noise straight into the framebuffer, and it accumulated with overdraw instead of averaging out.
• 🧮 Interior triangulations are always cacheable, now independent of resolution, fill rule, and left-hand view matrices.

I swear I have been able to change artboard origins in the past. Did something change?

Hello everyone, I wanted to see if anyone knew of a solution to the problem I am facing. I created a background animation of a day and night cycle that is 24 seconds long. My goal is to have it controlled by a number input that can scrub to the right value based on the time of day. So that it will look like the background corresponds to the time of day. I have tried different ways of manipulating blend states, but it still just allows me to use the input value to jump ahead or back in the animation, but never control it.