State Machine Layer Order

1m 39sPublished Sep 25, 2025

SummaryVersion Notes (Draft)

The primary teaching objective of this course is to master the layout precedence rules and property conflict resolution matrix between concurrent State Machine Layers in Rive.

In complex, multi-track interaction scenarios, a common development hazard arises when different running layers attempt to animate the exact same property of the same vector layer simultaneously (e.g., Layer 1 driving an item's Y-coordinate up, while Layer 2 steers it down). Rive manages this collision natively via a strict "rightmost layer takes precedence" architecture. Understanding this structural compounding stack order guarantees that designers maintain deterministic control over asset outputs, empowering them to blend states flawlessly and spot rendering blocks before runtime multi-platform delivery.

The Sequential Processing Paradigm: Rive's state engine processes layer nodes sequentially from left to right across the UI deck. Consequently, during each evaluation tick at runtime, the right-hand layer acts as a net-new modifier stamp, completely re-writing any conflicting transform arrays parsed by previous steps.
The Property Isolation Principle: To avoid unintended cross-layer locks, keep property sets isolated. If Layer 1 records scale values for an idle loop, and Layer 2 attempts to manipulate scale based on a cursor distance matrix, Layer 1's keyframes will be canceled. To blend these effects, wrap the asset into hierarchical "Groups"—assigning Layer 1 to drive the parent folder and Layer 2 to steer the child sub-layer.
Dynamic Blending Capabilities: While this module highlights an absolute binary override (100% masking opacity), advanced multi-layer systems can modulate layer opacity or set blend inputs. This technique allows rightward and leftward nodes to co-author a property vector proportionally, which is crucial for nuanced 2D facial rig blendshapes.
Debugging Multi-Track UI Anomalies: If a specific graphic asset's translation, tint, or opacity breaks away from its assigned state machine logic flow inside a multi-layered dashboard, look horizontally across the track deck. Inspect the rightmost layer graph to find if any unintended "Silent Keyframes" are locking down those exact same property states.

📌 Key Points

Right-side layers have priority when multiple layers animate the same property.

📝 Notes

Markdown

0 chars

Step by Step

00:00:04

Reviewing Safe Concurrency States:

Instructor Ross reviews the baseline established in the previous course, noting that the red and blue squares execute simultaneously without glitching because they map to entirely separate vector targets.
00:00:24

Introducing the Property Collision Experiment:

Pose the central architectural question: What happens inside the runtime canvas engine when two active parallel tracks target the exact same property field of a single object simultaneously?
00:00:32

Setting Up the Conflicting Timeline Rig:

Produce a white vector square. Define Timeline A to pin its Y-position near the top of the artboard, and configure Timeline B to snap its Y-position near the bottom. Nest each timeline into its own dedicated layer track.
00:00:54

Executing the Initial Run Test:

Launch the state machine execution loop. Observe that the white square does not jitter or lock up; instead, it rests completely stable at the bottom position, honoring Timeline B's specific parameters.
00:01:02

Declaring the Rightmost Precedence Law:

Reveal Rive's core evaluation rule: In the state machine controller deck, the layer positioned furthest to the right takes total precedence, immediately overwriting common vector tracks located to its left.
00:01:09

Reversing Layer Order via Drag-and-Drop:

Drag the timeline track anchoring the top position from the left side of the layer deck over to the rightmost slot. Re-run playback to see the square instantly snap upward, validating the priority shift.
00:01:22

Core Industry Best Practice Wrap-up:

Ross delivers an essential workflow warning: As a general rule of thumb, it is highly recommended never to animate the same property across timelines playing concurrently. If your pipeline demands it, remember that the rightmost layer always dictating the final render frame is a hard rule.