Animation Exercise Pendulum

Name: Rive 101 - Animation Exercise Pendulum
Uploaded: 2025-10-22T00:00:00.000Z
Description: This video demonstrates a practical exercise using Rive's text splitting and text modifier tools to animate a looping, bouncing metronome effect inside a single text layer.

8m 49sPublished Oct 22, 2025

▶ Watch on YouTube ↗

SummaryVersion Notes (Draft)

Core Educational Objective: Master the process of splitting a single text layer into multiple custom Text Runs in Rive and independently controlling them using individual Text Modifiers to create compound overlapping animations.
Background Pain Points: In traditional motion design workflows, isolating and animating single letters or words within a phrase often requires breaking the text into completely separate layers. This breaks typographical flow and significantly complicates localization or dynamic content injection.
Final Business Benefits: Showcases the advanced capabilities of the Rive Text Engine. By dynamically orchestrating intra-text properties, custom easing, and boundary overshoot inside a single live text component, designers can deliver high-performance, localization-ready responsive text systems to development runtime targets.

Data Model Discrepancy: The Rive animation timeline records scale properties inside modifiers as absolute multiplier decimals rather than percentages, despite the setup UI displaying percentage values. For instance, 1 corresponds to 100%, while an amplification target of 110% must be input as 1.1 in the timeline track.
Handling Cross-Boundary Physics in Loops: When an animation sequence or secondary motion trailing effect gets cut off by a looping boundary, do not extend the global duration. Instead, wrap the remaining kinetic force over to the start of the loop by matching the boundary values and projecting the overshoot into the initial frames.
Volume Conservation Rule: When executing Squash and Stretch deformations on typographical or UI assets, always balance the scaling factors proportionally (e.g., if one axis scales up by +20%, scale down the opposite axis by roughly -20%) to keep the element's overall visual mass constant.

📌 Key Points

The current official playlist places this pendulum exercise after Text Modifiers; the lesson slot is restored locally, while the full written walkthrough still needs a review pass.

📝 Notes

Markdown

0 chars

Step by Step

00:00:04

Split Text Selection into Runs:

Double-click the text layer to enter edit mode, highlight the middle letter "O", and select Create text run from selection in the Inspector. This isolates the text layer into three distinct runs: "METRA", "O", and "NOME".
00:00:45

Create and Name Text Modifiers:

In the text layer properties under Text Modifiers, add three separate modifiers and rename them to "metra", "O", and "gnome" respectively.
00:01:07

Bind Properties and Assign Targets:

Add the Position property to both "metra" and "gnome" modifiers, and add the Scale property to the "O" modifier. Map each modifier to target its corresponding text run.
00:01:33

Initialize Timeline States:

Switch to Animate mode. Set the 1-second timeline to Loop. Keyframe the initial position and scale values for all modifiers at frame 0, and hit the shortcut U to reveal all active keyframe channels.
00:02:10

Animate Horizontal (X) Impacts:

Move to frame 15 (1/4 cycle) and change the X position of "METRA" to -70. Move to frame 30 (the exact half-way point where the impact occurs) and return its X position to 0. Move to frame 45 (3/4 cycle) and change the X position of "NOME" to +70, returning it to 0 at frame 60 (the end of the timeline).
00:03:00

Refine Interpolation Curves:

Select the first set of keyframes for both shifting runs, change the interpolation from Linear to Cubic, and shape the handles to start fast and slow down. Select the second set of keyframes and shape them to start slow and speed up to mimic physical momentum.
00:04:00

Introduce X-Axis Overshoot:

To add organic kinetic elasticity, jump forward a few frames past the return point of "METRA" and add an extra X-axis keyframe with a value of +20, utilizing a fast-to-slow cubic ease.
00:04:32

Resolve Loop Boundary Cutoffs:

Since "NOME" hits the center right at the end of the timeline, there is no room for an overshoot curve. Resolve this by establishing identical fallback values at frame 0 and frame 60, then add a corresponding overshoot value of -20 at the beginning of the timeline (e.g., frame 3) to maintain a seamless looping wave.
00:05:23

Animate Vertical (Y) Pendulum Arc:

Set a Y position keyframe of -70 at frame 15 for "METRA" and return it to 0 at frame 30. Repeat this process for "NOME" with a Y position of -70 at frame 45. Convert these to Cubic curves to merge the X and Y translations into a smooth curved swing.
00:06:41

Animate the Impact Squash on Letter "O":

Navigate to frame 30. To simulate squash and stretch under impact while maintaining visual mass, keyframe the scale of "O" to an X value of 0.8 and a Y value of 1.2.
00:07:50

Calculate Decay Damping and Duplicate:

Progress forward a few frames at a time to damp the bounce, keyframing scale values sequentially through [X: 1.1, Y: 0.9] -> [X: 1.05, Y: 0.95] -> [X: 1.0, Y: 1.0]. Copy this entire spring block and paste it at frame 0 to accommodate the loop-ended impact from the "NOME" run.
00:08:27

Final Integration Testing and Wrap-up:

Run the timeline playback to evaluate the holistic interaction mesh. Verify that the loop transitions seamlessly, confirming that "METRA" and "NOME" act like physical metronome weights that smoothly strike the central "O" in a continuous motion chain.