Animating Path Vertices

2m 26sPublished Oct 21, 2025Partial+1 changes

SummaryVersion Notes (Draft)

This lesson explores how to animate individual path vertices and Bezier handles in Rive. Unlike other software where moving a point keys the entire path, Rive allows for independent keying of specific vertex properties like position, corner radius, handle angle, and handle length, which optimizes performance and file size.

Granular Control: Rive's ability to key individual vertex properties (rather than the whole path) is a unique feature that offers more control and efficiency.
Vertex Types: Remember that available properties change based on the vertex type (Straight vertices have Corner Radius, while Mirrored/Asymmetric vertices have Bezier handles).
Performance Tip: Overusing "Key All Vertices" can significantly bloat your file size. Stick to keying only what moves whenever possible.

Some content differs from current version1 changes

2024.12Key All Vertices shortcut

New Shift+K shortcut.

📌 Key Points

Animate vertex position, rotation, handles. Batch-key all vertices.

📝 Notes

Markdown

0 chars

Step by Step

00:12

Accessing Vertices

Select a custom shape and double-click or open its path hierarchy to access individual vertices.
00:20

Keying Specific Properties

Select a vertex to see its properties in the Inspector (e.g., Position, Corner Radius). Click the diamond icon to set a keyframe for that specific property.
00:46

Animating Bezier Handles

For curved vertices (e.g., Mirrored), you can independently animate the handle angle and length to morph the shape.
01:34

Key All Vertices

Use the "Key All Vertices" button in the Inspector if you want to capture the entire state of the path at once, which creates keyframes for every property of every vertex.
01:55

Optimizing Performance

Avoid unnecessary keyframes. Keying only the required vertices keeps file sizes smaller and improves runtime performance.