Rive 101 - Components Rive 2025-09-26 | Components let you use different instances of your designs across your projects and eventually (with a future update) you'll be able to use different instances of components across your FILES.
Rive 101 - Single Animation States Rive 2025-09-25 | States are animations that can play at any point in your state machine. A state could be as simple as changing the color and position of an object or as complex as a character action.https://rive.app/docs/editor/state-machine/states
Rive 101 - Inputs Rive 2025-09-25 | Inputs are like View Model Properties' much simpler cousin. They act as conditions for our transitions but can only be accessed within the editor. If you want to control a property at runtime you need to use View Model Properties.https://help.rive.app/editor/state-machine/inputs
Rive 101 - Common State Machine Issue Rive 2025-09-25 | The most common problem that new users face while working with the state machine is keeping track of what properties need keyframes.If a part of your design is animated and you transition to a state where it is not animated, they property value will freeze where it was in the previous state.If you want to change something you MUST set keyframes for the change.
Rive 101 - Controlling Inputs with Listeners Rive 2025-09-25 | You can use Listeners to control Inputs too.However... we STRONGLY recommend using View Model Properties instead of inputs. View Model Properties offer much more flexibility when it comes to setting conditions and controlling conditions in your runtime code.https://rive.app/docs/editor/state-machine/inputs
Rive 101 - Build a simple button Rive 2025-09-25 | In this exercise, we will use our state machine knowledge to create a simple button with two layers of interactivity. Hover and click.
Rive 101 - And/Or Transitions Rive 2025-09-25 | We can add multiple conditions to a transition to create an And transition, but we can also make multiple transitions to the same state to create an Or transition.https://rive.app/docs/editor/data-binding/overview
Rive 101 - State Machine Overview Rive 2025-09-25 | State Machines are at the heart of Rive. They give designers the power to create interactive components. State Machines consist of States, Input Properties, Listeners, Conditions, and Transitions.https://rive.app/docs/editor/state-machine/state-machine
Rive 101 - State Machine Layers Rive 2025-09-25 | State machine layers allow you to play multiple animations simultaneously. Even if the animations have different timings. Additionally... each state machine layer adds another layer of interactivity to your project.https://help.rive.app/editor/state-machine/layers
Rive 101 - Initial Values Rive 2025-09-25 | You can define default values for your View Model Properties before the state machine is active. This allows us to further define what state our content starts in.https://rive.app/docs/editor/data-binding/overview
Rive 101 - Listeners Rive 2025-09-25 | Listeners allow us to listen for actions on the artboard and cause changes to View Model Properties in our State Machine.Help Center - https://help.rive.app/editor/state-machine/listeners
Rive 101 - Conditions Rive 2025-09-25 | Conditions allow designers to control precisely when a transition between states will occur. We recommend using View Model Properties in your conditions as they can be controlled at runtime.https://rive.app/docs/editor/data-binding/overview
Rive 101 - Align Target Rive 2025-09-25 | Listeners can align targets to our cursor.Help Center - https://help.rive.app/editor/state-machine/listeners
Rive 101 - Transitions Rive 2025-09-25 | Transitions supply the logical map for the state machine to follow. Use them to travel from one state to another using whatever logic you choose.https://help.rive.app/editor/state-machine/transitions
Rive 101 - State Machine Layer Order Rive 2025-09-25 | We advise never to animate the same design's layer's property on more than one state machine layer simultaneously. BUT if you ever do, you should know about state machine layer precedence. Always remember... the state machine layer on the RIGHT takes precedence.https://help.rive.app/editor/state-machine/layers
Rive 101 - Exit State Rive 2025-09-25 | The exit state does NOT shut down your entire state machine. Transitioning to the Exit State will make only that specific state machine layer to stop playing and deactivate. All other active state machine layers will continue playing.https://help.rive.app/editor/state-machine/states
Rive 101 - Any State Rive 2025-09-25 | The Any State Node allows you to transition to any state, regardless of which state your state machine is currently in. It is extremely useful and can help scale your projects.https://help.rive.app/editor/state-machine/states
Create a Percentage Chart With Data Binding! Rive 2025-09-23 | Data Binding in Rive lets you use formulas to control your graphics.Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started
How to use COMPONENTS in Rive Rive 2025-09-18 | Components are like Nested Artboards... on steroids. Components let you use multiple versions of your designs across your projects.Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started
How to Create a Star Rating Component in Rive Rive 2025-09-16 | Project file: https://rive.app/blog/create-a-star-rating-component-with-rive-s-state-machineRive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started
Best Practices: Build nested components with Data Binding, not inputs Rive 2025-09-15 | When building nested components, it is a best practice to use Data Binding instead of inputs. Here's how to set it up.
📣 Nested Artboards are now Components Rive 2025-09-15 | Components let you decide what’s reusable and exported at runtime.Components give you tighter control over what gets exported, keep big files from turning into a junk drawer, and set the stage for what’s next: Libraries. 👀
Rive 101 - Lists Rive 2025-09-12 | Lists allow you to use View Model Instances as elements within Layouts. Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started
Rive 101 - Import Photoshop Files (PSD) Rive 2025-09-10 | Rive allows you to work with PSD files too! Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Create a Menu Using LISTS in Rive Rive 2025-09-09 | Today JC teaches how to use our new feature... LISTS, to create a FULLY FUNCTIONAL menu.Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started
Rive 101 - Import Raster Artwork Rive 2025-09-08 | Rive also allows you to work with raster images. We also look at different compression options to optimize the size of our raster files.Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Rive 101 - Importing Vector Artwork (SVG) Rive 2025-09-08 | How to import SVGs, a vector format that will allow us to bring our designs into Rive from other applications.Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Rive 101 - Assets Panel Rive 2025-09-08 | Use the assets panel to import different types of files into Rive. We will also learn shortcuts to access each panel.Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Rive 101 - Align and Distribute Rive 2025-09-08 | Align tools allow us to align and distribute objects on the stage.Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Rive 101 - Rulers and Guides Rive 2025-09-08 | You can use Rulers and Guides in Rive to align your designs and help you position different elements.Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Rive 101 - Clipping Rive 2025-09-08 | In this lesson, we’ll see how clipping works and how we can mask some shapes with others.Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Rive 101 - Origin and Freeze Rive 2025-09-08 | When you transform objects, their children inherit the same transformations. The location where these transformations happen (sometimes called the origin, anchor point, or pivot) affects how your objects animate.Freeze Shortcut: Key “Y”Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Rive 101 - Hierarchy and Groups Rive 2025-09-08 | In this video, we dig into the Hierarchy to explore parent/child relationships and Groups. You can use Groups to organize your graphics or to add extra transform spaces.Create Group Shortcut: Key “G”Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Rive 101 - Path Direction and Fill Rules Rive 2025-09-08 | Today we discuss the direction of paths and how it affects fill rules.Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Rive 101 - Shapes and Paths Rive 2025-09-08 | Rive allows you to create, edit, and animate vector graphics using either procedural or custom shapes. These graphics combine shape and path layers to define them, which Rive exposes to give you greater flexibility and control with your designs and animations.Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Rive 101 - Fills and Strokes Rive 2025-09-08 | In this video, we discuss how to use Fills and Strokes and how to copy and paste them from one object to another.Copy Style Shortcut: Control + Alt + C (Windows)Option + Command + C (Mac)Paste Style Shortcut: Control + Alt + V (Windows)Option + Command + V (Mac)Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Rive 101 - Procedural Shapes Rive 2025-09-08 | In this video, we discuss Procedural Shapes. Procedural Shapes allow us to create different geometric shapes such as the rectangle, the oval, the star or any polygon. In this lesson we will see how to use them.Rectangle Shortcut: Key “R”Oval Shortcut: Key “O”Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
Rive 101 - Pen tool Rive 2025-09-08 | In this video we'll talk about the Pen Tool. The Pen tool allows you to create custom vector paths and add additional vertices to your procedural paths.Pen Shortcut: Key “P”Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Rive is free to use (for individuals) and free to learn!Download: http://rive.appDocs: https://rive.app/docs/getting-started/introduction
How to Host Brotli-compressed (same as WOFF2) Fonts and Use Them in Rive for Web Rive 2025-09-04 | Instead of embedding TTF/OTF fonts, host Brotli compressed fonts and load them into Rive for web at runtime. Try it out: codesandbox.io/p/sandbox/prod-sound-6yc5xl
How to create a simple 3D effect in Rive Rive 2025-09-02 | Use mesh and bones to create a simple 3D effect with a raster image in Rive.
Data Binding: How to use each type in Rive Rive 2025-08-28 | An overview and demo of what the Target to Source, Bidirectional, and Bind Once options do when setting up Data Binding in Rive.
Detect View Model Property Changes in Code Rive 2025-08-22 | Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.Project files: github.com/rossplaskow/copy_emailThis Data Binding tutorial shows how to listen for View Model property changes in your code and let your Rive files activate functions at runtime.Rive is free to use (for individuals) and free to learn!Check it out http://rive.app
Create a Dynamic Score Icon in Rive Rive 2025-08-15 | Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.This tutorial shows how to use Data Binding to create a score card that updates and reacts to data-changes in REAL TIME.Rive is free to use (for individuals) and free to learn!Check it out http://rive.app
Data Binding: How to update a solo group with an enum property in Rive Rive 2025-08-14 | With Data Binding in Rive you can use an enum property to control the visibility of solo layers.
How to TOGGLE Booleans with Data Binding Rive 2025-08-11 | Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.This tutorial explains how to toggle the value of a boolean using a listener and a Data Binding Converter. Toggling values (as opposed to setting them true or false) saves time and simplifies your designs.Rive is free to use (for individuals) and free to learn!Check it out http://rive.app
How to play RANDOM animations in Rive Rive 2025-08-06 | Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.This tutorial explains how to use RANDOMIZE EXIT in state machine transitions to add randomness to your animations.Rive is free to use (for individuals) and free to learn!Check it out http://rive.app
Ever heard of the CLOCKWISE Fill Rule??? Rive 2025-08-02 | Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.This brief video explains how to subtract paths from shapes using the CLOCKWISE FILL RULE.Rive is free to use (for individuals) and free to learn!Check it out http://rive.app
Did you know? Rive has a FREE sound library! Rive 2025-08-01 | Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.This brief video explains how to source audio from our free sound library.Rive is free to use (for individuals) and free to learn!Check it out http://rive.app
How to COMPARE VALUES in Rives State Machine Rive 2025-07-28 | Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.This video shows how to compare two values in Rive and use that as a condition in the state machine.Rive is free to use (for individuals) and free to learn!Check it out http://rive.app
How To Control View-Model Properties in Javascript Rive 2025-07-26 | Project files: dropbox.com/scl/fo/ub43ndjt4sosildt1kyyd/AKH_o_GGJaYWwIUqQXq4yis?rlkey=8da7ci3d2laa8d5mwzb16b01g&dl=0Rive is a design tool for creating interactive, production-ready graphics for websites, games and apps.This tutorial is a brief overview of how to access and control View Model Properties in your Javascript runtime code.Rive is free to use (for individuals) and free to learn!Check it out http://rive.app
