Text Modifiers

Name: Rive 101 - Text Modifiers
Uploaded: 2025-10-22T00:00:00.000Z
Description: This video breaks down the underlying core logic and configuration workflow of Text Modifiers in Rive, showcasing how to manipulate Range, Fall-off, Offset, and stacked properties to build complex wave or bounce animations.

6m 53sPublished Oct 22, 2025

▶ Watch on YouTube ↗

SummaryVersion Notes (Draft)

Core Educational Objective: Deeply understand and master the configuration of Rive Text Modifiers. Learn to engineer highly controllable local text segment animations via precise Range bounds and property combining without destroying typographic structural hierarchy.
Background Pain Points: In conventional design tools, making text bounce char-by-char, fade in progressively, or skew a particular word usually demands manually breaking the string into separate vector layers. This introduces a heavy maintenance burden and fails entirely when dynamic runtime copy substitution is required.
Final Business Benefits: Text Modifiers provide powerful, non-destructive runtime character-level matrix transformation capabilities. Designers can expose simple control hooks (like Offset) to execute waves, text tickers, or smooth dampening transitions directly via code or timeline keyframes with incredibly low performance overhead, maximizing cross-platform UI adaptability.

Atomic Property Bundling: A single Text Modifier Group allows an infinite combination of diverse attribute tracks (such as Scale + Position + Opacity). This ensures they share an identical Range, Fall-off, and Offset data pipeline, forcing spatial transformations and visibility shifts to stay in perfect lockstep.
Architectural Choice Between Percent and Index: In practical runtime systems, if your copy is injected dynamically via backends or translated across varying languages, default to Percent mode to guarantee animations scale relative to text length. Reserve Index mode for fixed UI tags or specific symbols where absolute string indices are guaranteed.
Underlying Render Optimization: Text modifiers operate at Rive’s runtime engine level using efficient per-glyph transformation matrices. Compared to rigging each letter manually via separate bones or breaking a sentence into dozens of vector layers, using modifiers dramatically lowers CPU overhead and keeps exported .riv file sizes compact.

📌 Key Points

Add modifiers to Runs: opacity, position, rotation, scale.

📝 Notes

Markdown

0 chars

Step by Step

00:00:04

Introduce Text Modifiers Concept:

Text Modifiers are advanced tools layered on top of Text Styles designed to unlock intricate run-level runtime animation options. By default, a newly created modifier alters nothing until explicit transformation properties are bound to it.
00:00:20

Bind Variable Properties:

Click the Plus (+) icon at the top of the modifier panel to select a property from the dropdown. Available options include Opacity, Origin, Position, Rotation, Scale, as well as Variable Font axes such as Weight, Optical Size, and Slant (font-dependent).
00:00:51

Configure Basic Transforms and Rename:

Select the Position property and set the Y value to -20. Rename the group in the hierarchy to "position modify" to ensure a structured, production-ready inspector naming scheme.
00:01:16

Isolate Range Boundaries:

By default, the modifier spans from 0% to 100% of the run. Increase the Start parameter to 20% and reduce the End parameter to 80%. The viewport instantly renders a blue highlight marking this isolated boundary zone; characters outside this bracket ignore the Y displacement entirely.
00:01:49

Apply Feathered Fall-off:

Adjust the Fall-off parameters, shifting the start to 40% and the end to 60%. This creates a smooth weighted gradient along the boundaries. Letters sitting closer to the pure blue zone receive full modifier influence, while those farther away scale down their response.
00:02:18

Leverage Offset for Fluid Wave Motion:

Manipulate the Offset slider. This parameter shifts the designated modifier zone continuously across the entire text run. Keyframing the Offset value forward in time easily produces organic ripple, bounce, or fluid wave animations.
00:02:35

Stack Multiple Properties in Parallel:

Click the plus icon within the same group to add Opacity. Set it to 100% alongside an inverted logic state. Now, characters within the active modifier range remain visible, whereas letters sitting outside the range or beyond the fall-off zones fade out completely to a baseline of 0%.
00:03:28

Analyze Overlapping Range Modes:

Explore the niche Range Mode option. When a single modifier group contains multiple overlapping ranges controlling the identical property track (e.g., Position), Range Mode dictates whether the shared vertices should Add, Subtract, Multiply, or combine values.
00:04:14

Switch Range Measurement Units:

Change the Range Type from Percent to Index. This adapts the system to calculate boundaries via exact raw character counts. For example, entering 0 to 20 restricts the modifier to run exclusively from the first character to the 20th character of the run.
00:04:51

Customize Fall-off Interpolation:

Change the Fall-off Interpolation from Linear to Cubic. Adjusting the handles in the pop-up graph gives full artistic authority over the physical acceleration and deceleration of text moving into and out of the modifier’s zone of influence.
00:05:13

Alter Targeted Unit Hierarchies (Based On):

In the range settings, shift the processing unit granularity from individual Characters (with options to toggle space exclusion) to complete Words or entire Lines of text.
00:05:38

Utilize Run Selector and Clean Viewport:

When dealing with multi-run configurations, utilize the Run Selector dropdown to restrict a modifier to affect "All Runs" or single designated selections. To remove distracting blue bounds from the viewport, toggle off Text Modifier Range in the options menu. Conclude by noting that all exposed attributes can be fully automated in Animate mode.