Fitting Elements

9m 51sPublished Apr 2, 2025

SummaryVersion Notes (Draft)

The primary objective of this course is to master the four core sizing behaviors—Fixed Pixel, Fixed Percent, Hug, and Fill—within Rive's advanced responsive layout system.

Addressing the industry-wide pain point where traditional vector animations break across diverse device screens due to hardcoded coordinates, Rive introduces a dynamic flow architecture akin to CSS Flexbox. By leveraging the adaptive Fill Ratio (fr) metric alongside the State Machine, designers can construct fluid UI components inside the Rive editor. These components automatically adapt to viewports while preserving custom physical animations, ensuring an identical interpolation experience from design to multi-platform runtime deployment.

Layout Hierarchy Architecture: When building complex fluid components, sizing parameters (like Fixed, Fill, Hug) are controlled at the child level, whereas layout alignments, structural Padding, and child spacing Gaps must always be configured on the immediate parent container.
The Fill Ratio Concept: Rive's fr unit operates identically to the CSS Grid Fractional Unit. Rather than relying on rigid percentage values, it calculates available space dynamically after subtracting hardcoded Fixed pixel items, margins, and layout gaps.
State Machine Entry Optimization: If an interactive transition is attached to the Any State node with an active duration and easing applied, Rive will interpolate from the raw Design Mode values to the designated timeline state immediately upon launch. To prevent accidental jumping or initialization pops, ensure that the asset's static Design Mode parameters mirror the baseline properties of the default entry timeline.
Batch Transition Efficiency: When setting up multi-state selector logic (e.g., tabs, accordions, segmented inputs), arranging states horizontally in the graph and utilizing the Create Condition from Left to Right function automates variable step mapping, eliminating repetitive manual entry.

📌 Key Points

Learn how elements can automatically fit their size and position to available space.

📝 Notes

Markdown

0 chars

Step by Step

00:00:02

Introduction to Layout Fitting:

Instructor Ross introduces the lesson's core focus: diving deeper into layout properties to optimally fit child elements within defined Rows and Columns.
00:00:21

Creating Text and Text Layouts:

Create a Text Layer containing the string "Box", then use the shortcut Shift + L to wrap it inside its own Text Layout. Note that Text Layouts automatically hug their child text bounds horizontally and vertically.
00:00:54

Building the Nested Layout Hierarchy:

Select the text layout, press Shift + L to wrap it in a Row named "Content", then wrap it again with Shift + L to create a parent container named "Viewport". Change the Viewport's layout type to Column in the inspector.
00:01:21

Disabling Absolute Position for Scaling:

Deactivate the Absolute Position toggle on the Viewport layout. This unlocks the sizing constraints, allowing you to set both Width (W) and Height (H) to Fill so the layout fully matches the Artboard dimensions.
00:01:47

Configuring Child Alignment and Styles:

Highlight the Content layout and set both its width and height properties to Fill. Click the alignment matrix to center the text within the container, apply a solid black background color, and set a Corner Radius of 30.
00:02:18

Duplicating Elements and Padding Control:

Duplicate the Content layout three times to create four identical boxes arranged vertically (each occupying 1/4 of the height). Select the parent Viewport to apply uniform Padding and adjust the Vertical Gap between the children.
00:03:05

Mode 1: Fixed Pixel Sizing:

Select the first box and change its horizontal sizing property from Fill to Fixed. Assign a dedicated pixel value. Scaling the Artboard demonstrates that the other three boxes adapt fluidly, while the first remains locked to its pixel width.
00:03:43

Mode 2: Fixed Percent Sizing:

Select the second box, switch its property to Fixed, and click the unit indicator next to the width value to change it from pixels to Percent. Enter 50%, ensuring it always spans exactly half of the parent's width during resize operations.
00:04:15

Mode 3: Content Hugging Sizing:

Select the third box and set its horizontal property to Hug. Because it wraps a text run, its container bounds are now entirely dictated by the length of the inner string; changing the text automatically scales the container width.
00:05:11

Mode 4: Fill Sizing inside a Horizontal Row:

To demonstrate the Fill mode comprehensively, isolate the last box and wrap it into a separate horizontal Row layout ("Fill Row") set to Fill both vertically and horizontally.
00:05:35

Understanding the Fill Ratio (fr) System:

Duplicate the filling box twice inside the Fill Row and define a horizontal gap. Each item defaults to 1fr (1 Fill Ratio), meaning they divide space evenly. Change one box's factor to 3fr to force it to take up three times as much space as the others.
00:06:38

Animating the Fill Ratio Factor:

Switch to Animate Mode and establish four separate Timelines. Set all three boxes to a base fr value of 1 in Timeline 1, and sequentially spike the fr value of the first, second, and third boxes to 3 in Timelines 2, 3, and 4.
00:07:21

State Machine Setup & Batch Condition Generation:

In the State Machine graph, connect all four timelines to the Any State node. Create a Number input variable. Select all transition wires simultaneously, right-click, and select Create Condition from Left to Right to map sequential conditions (0, 1, 2, 3) instantly.
00:08:04

Easing Curves & Resolving Initial Glitches:

Assign a 500ms duration to all transitions and apply a bouncy, elastic easing curve. To fix the issue where the layout prematurely bounces upon entering the state machine, adjust the initial fr value in Design Mode to match the neutral state of the first timeline.
00:08:55

Configuring Pointer Enter Listeners:

Add three distinct Listeners to the state machine targeted at the three layout boxes. Configure them to track the Pointer Enter event, changing the Number variable value to 1, 2, or 3 respectively when hovered.
00:09:27

Interactive Testing and Multi-Viewport Validation:

Run the state machine to perform an integration check. Hovering over the individual boxes drives the elastic scale expansion smoothly. Resizing the Artboard viewport mid-animation verifies that the dynamic layout preserves its spatial proportions perfectly under any aspect ratio.