Exercise: Simple Button

Name: Rive 101 - Build a simple button
Uploaded: 2025-09-25T00:00:00.000Z
Description: Learn how to utilize Rive's core layers, nested grouping, timelines, view models, and multi-layered state machines to build a smart responsive button with concurrent hover states and fluid click physics from scratch.

7m 47sPublished Sep 25, 2025

▶ Watch on YouTube ↗

SummaryVersion Notes (Draft)

Core Educational Objective: Demonstrate how to implement a nested "Group within a Group" architecture to decouple overlapping transform properties, and build concurrent animations for Hover and Click actions across a dual-layer state machine configuration.
Background Pain Points: When adding multiple animations to a single layer, simultaneous actions like hovering (scaling up) and clicking (elastic squish) overwrite or conflict on the same scale track, causing stuttering or logical deadlocks.
Final Business Benefit: Complete a comprehensive high-fidelity interactive button pipeline. By leveraging a View Model alongside independent concurrent state machine layers, you achieve real-time physics overlap and a "Liquid Bounce" interaction. Since all logic remains self-contained, it provides an out-of-the-box asset ready for UI implementation.

The Nested Decoupling Principle: This is an essential architectural baseline for engineering advanced interactive assets in Rive. Because Rive applies independent transform data blocks to every distinct group, nesting spaces (e.g., placing a hover parent container above a click child) separates conflicting metrics. The system compounds these via matrix multiplication at runtime, eliminating interpolation overwrite bugs.
Concurrent State Machine Layers: State machine layers operate in absolute parallel workflows at runtime. The hover layer continuously updates color interpolation data and scale ratios across the parent matrix while the click layer simultaneously fires rapid-fire squish physics without resetting parent tracking channels.
Rapid Fire Triggers and Alternating State Nodes: When animating high-frequency click events (e.g., trigger switches or UI buttons), a single terminal transition path forces an active animation clip to finish its track before resetting. Stringing two identical timeline assets together inside an alternating trigger loop permits zero

📌 Key Points

Build interactive button: hover color change + click bounce effect.

📝 Notes

Markdown

0 chars

Step by Step

00:00:04

Create Foundational UI Geometry:

Use the shape layer tool to draw a rectangle, modify its fill to pure black, slide the vertex handle to establish rounded corners, and align it dead center on the Artboard along with a new "button" text layer.
00:00:33

Construct the Nested "Group within a Group" Architecture:

Highlight both layers and hit Cmd + G to group them. Immediately press Cmd + G a second time to warp that group inside a parent group. Rename the outermost parent container to hover and the inner one to click, isolating their respective scale properties into independent matrices.
00:01:18

Initialize Three State Machine Timelines:

Use the Tab shortcut to unlock the State Machine view and click to create three individual timeline blocks. Rename them respectively to no hover (default idle), hover (active focus), and click (impact rebound feedback).
00:01:36

Keyframe the Hover and Idle Parameters:

Select the no hover track and drop scale keyframes at 100% alongside a black fill keyframe for the background rectangle. Switch to the hover track, increase that identical group's scale value to 110%, and change the shape fill to blue to review the distinct states.
00:02:13

Plot the Elastic Click Bounce Curve:

Open the click track, highlight the nested inner click group container, and hit U to track active channels. Advance the playhead across frames to draft an elastic wave: drop to 90% at frame 1 → rebound up to 105% → drop back to 98% → settle up at 101% → come to rest at 100%. Highlight all points and apply a uniform Cubic Easing transition curve.
00:02:57

Polish the Interaction Easing Cadence:

Preview the click playback and note that the rhythm feels too abrupt. Manually drag out the distances between keyframes on the timeline and slide the scale channel keys slightly to introduce an intentional phase offset, shaping an elastic "Liquid Bounce" feel.
00:03:25

Set up the Dedicated Hover Layer:

Within the State Machine tree view, name the default base layer to hover. With no hover automatically designated as your entry state (Default Timeline), drag the hover timeline node onto the node editor grid and wire up a bidirectional transition loop.
00:03:56

Instantiate the View Model and Data Properties:

Select your Artboard node to construct a fresh View Model property, which instantly binds to the active artboard. Navigate over to the Data Panel to append two structural input variables: a boolean named bool and a trigger labeled trig.
00:04:19

Inject Conditions and Transition Easing:

Wire up input criteria on your hover transitions: declare that if bool == true, the graph transitions forward into the blue hover node; if bool == false, it retreats. Set a 500ms duration with custom cubic blend parameters across both branches, then verify using the data check toggles.
00:05:07

Map Hover Actions to Physical Pointer Listeners:

Generate two clean Listener events named enter and exit, mapping both targets directly to your core button graphic asset. Configure them so that a Pointer Enter event mutates bool = true, and a Pointer Exit event sets bool = false, completing your responsive focus simulation test.
00:05:57

Deploy a Parallel Click State Machine Layer:

Add an entirely separate State Machine Layer row and name it click. To safeguard against high-frequency click clipping, drag the identical linear click timeline asset onto the editor canvas two separate times, routing them sequentially from the main Entry block into a continuous loop.
00:06:29

Configure the Incessant Trigger Loop:

Group-select all three transitions inside your click layer layout and assign their operating condition to fire when the trig input variable is ticked. This ensures that regardless of the active state frame position, hitting the trigger instantly forces the alternate path to spin up, re-initiating the squish animation with zero lag.
00:07:13

Bind the Pointer Click Trigger and Run Final Multi-State Validation:

Append a final interaction listener row named click trig, locking its focus onto the main button asset layer. Choose Pointer Down as your input filter and bind its action block to fire the trig variable. Run a complete system validation: the element scales up smoothly on hover and handles rapid clicks by applying layered squish physics simultaneously to conclude the workshop.