Rive Animations

This walks you through implementing all 12 Disney animation principles in Rive, from squash and stretch to appeal. It's built around Rive's state machine system, showing you how to set up bone hierarchies, use the Graph Editor for easing curves, and wire up interactive triggers from your code. The examples are specific, like offsetting child bone keyframes by 2-4 frames for follow-through action or using inverse scale relationships for squash and stretch. If you're trying to make animations feel polished instead of robotic, this gives you the playbook. The React hooks example at the end is clean and the file size point matters since Rive exports to a tiny binary format.

skills.sh installs: 618
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill rive-animations --agent claude-code

Installs into .claude/skills of the current project.

Files

Rive Animation Principles

Implement all 12 Disney animation principles using Rive's state machine and interactive animations.

1. Squash and Stretch

In Rive Editor:

Create shape with bones
Animate scale X/Y with inverse relationship
Key: scaleX: 1.2 when scaleY: 0.8

// Trigger from code
rive.play('squash_stretch');

2. Anticipation

State Machine Setup:

Create "Idle" state
Create "Anticipate" state (wind-up pose)
Create "Action" state
Connect: Idle → Anticipate → Action

const inputs = rive.stateMachineInputs('State Machine');
const trigger = inputs.find(i => i.name === 'jump');
trigger.fire(); // Plays anticipate → action sequence

3. Staging

In Rive:

Use artboard layers for depth
Apply blur/opacity to background layers
Use nested artboards for complex scenes

// Control visibility
const bgOpacity = inputs.find(i => i.name === 'bgOpacity');
bgOpacity.value = 0.6;

4. Straight Ahead / Pose to Pose

Pose to Pose in Rive:

Set key poses on timeline
Rive interpolates between
Use easing curves in Graph Editor

5. Follow Through and Overlapping Action

SKILL.md on GitHub

Details

Repository: github.com/dylantarre/animation-principles
Category: Design & UI/UX
First seen: Jun 3, 2026