Rive 101 Tutorials

File browser: create files/folders, search, sort, free vs paid plans.

Design & Animate modes, Stage, Inspector, Hierarchy, Assets, Toolbar.

Selection tool: marquee, Shift add/remove, double-click hierarchy, Command pass-through, Gizmo.

Auto-align objects to center/edges/corners, temporarily disable.

Create artboards, resize, set origin, background fill, multi-artboard management.

Create vertices, Bézier curves, edit shapes, vertex types (mirrored/detached/asymmetric).

Rectangle, ellipse, triangle, polygon, star creation and editing.

Color, opacity, radial/linear gradients, multiple fills/strokes, copy-paste styles.

Shape layers control appearance, Path layers define form. One Shape can hold multiple Paths.

Path direction affects fills. Non-zero fill rule. Create cutout effects with winding.

Hierarchy panel shows all objects, controls draw order and parent-child relationships.

Origin is the transform anchor. Freeze mode moves origin without affecting existing animation.

Mask elements with shapes for 3D effects and creative designs.

Activate rulers, create guides, snap to guides, lock/clear guides.

Edge align, center align, distribute. Multi-object and artboard alignment.

Import files, sort options, switch between Assets and Hierarchy panels.

Import SVGs via Assets panel, edit colors/vertices, clean up excess points.

Import PNG/PSD/JPEG, adjust compression. PSD supports multi-layer import.

Import PSD files with layer structure preserved for further editing and animation in Rive.

Timeline operations: play/pause, playhead, loop types, duration and speed adjustments.

Set keys via inspector or stage, copy-paste keys, timeline shortcuts.

Visualize movement trajectory; dots represent frame spacing.

Linear/hold/cubic interpolation, curve handles for ease in/out.

Define playback range, offset keys for natural loops.

Visualize interpolation curves and keys, directly manipulate cubic handles.

Build a pendulum from scratch: shapes, grouping, origin, rotation keys, interpolation.

A full bouncing ball exercise covering motion, timing, and basic squash and stretch.

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

Solos toggle child visibility, great for frame-by-frame animation.

Top of hierarchy draws in front. Custom draw rules for animated ordering.

Export .riv/.rev, share links, video/image/GIF export, batch export.

Limit FPS for a traditional hand-drawn animation feel.

A deeper explanation of what Position values really mean in animation and hierarchy contexts.

Create text boxes, position/scale/rotation/size, alignment, overflow behavior.

Split text into Runs for different styles. Change text values at runtime.

Font, size, line height, color, multiple fills/strokes, variable font properties.

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

Intro to three rigging tools: Bones, Joysticks, Constraints.

Bone tool: root & child bones, joint controls, hierarchy relationships.

Attach artwork to bones. Transforms inherited. More performant than binding.

Bind bones to path layers. Weights determine each bone's influence on vertices.

Pan between timelines for control, support inversion and multi-joystick.

Constraints allow one object's properties to be driven by another.

Link position properties between objects with range, strength, and animation.

Follow scale properties between objects.

Follow rotation, adjust strength for partial following.

General constraint combining translation, rotation, and scale.

Three modes: closer (max distance), further (min distance), exact (fixed distance).

Inverse Kinematics: control bone chain rotation by moving a target point.

Objects follow a path with distance percent and orientation control.

Set constraint strength to -100 for inverse motion.

State machines add interactivity via states, inputs, conditions, and transitions.

Playback settings (one-shot/loop/ping-pong), create timelines, drag to add states.

SM layers play multiple animations simultaneously with independent states/transitions.

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

Transitions control state switching, need conditions/inputs to prevent infinite loops.

Three input types: Number, Boolean, Trigger. Controllable via code.

Use inputs as transition conditions: boolean true/false, number operators, triggers.

Multiple conditions with And (all met) or Or (any met) logic.

Initial input values determine which state the SM enters on start.

Listeners detect interactions like hover and click, making them available to state machine logic.

Listeners detect mouse interactions and change inputs to drive state transitions.

Use Align Target to make objects follow cursor position.

Any State enables transitions from any state, avoiding complex transition webs.

Exit State deactivates its layer, useful for performance optimization.

Common beginner mistake: missing keys cause unexpected state transitions.

Build interactive button: hover color change + click bounce effect.

Add sound events to animations and state machines so audio can trigger at the right moments.

Main use cases and scenarios for layouts.

Organize layout elements with rows and columns.

Create dynamically resizing button components.

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

Let layouts reflow automatically when component sizes change while preserving structure.

Control layout direction and flow to better suit different content and interface needs.

Learn the core ideas behind Rive data binding and how it connects design, state, and runtime data.

Define and organize view model properties to provide bindable data for UI and animation.

Use converters to map between different data types and presentation formats.

Understand one-way vs two-way binding and when each bind direction makes sense.

Use enum values to represent discrete states and keep binding logic clearer.

Group related properties together to make larger data models easier to manage.

Control Rive files and data bindings from code to bridge design and engineering.

Observe view model property changes in the Rive editor for debugging and validation.

Read and write view model properties from Javascript to connect app state with Rive.

Listen for property changes in code to drive reactive updates and app logic.

Use list data to generate and drive repeated content with more flexible bindings.

Use components together with data binding to build more reusable interactive units.

Use list index values to access and control specific items in repeated content.

Learn how Libraries let you reuse design systems and assets across files and projects.

Use data binding inside Libraries so reusable components stay dynamic and configurable.

Detach instances from library assets so they can be edited independently while keeping their content.