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

In Rive Editor:

• Use bone hierarchy with constraints

• Apply "delay" or "lag" to child bones

• Or offset keyframes by 2-4 frames

• Use spring constraints for natural follow-through

6. Slow In and Slow Out

In Rive Graph Editor:

• Select keyframes

• Apply easing: Cubic, Quad, Bounce

• Adjust bezier handles for custom curves

// Runtime speed control rive.play('animation', { speed: 0.5 });

7. Arc

In Rive:

• Use IK (Inverse Kinematics) for natural arcs

• Apply path constraints

• Animate position with curved interpolation

8. Secondary Action

State Machine approach:

// Listen for state changes rive.on('statechange', (event) => { if (event.data.includes('button_press')) { // Secondary animations auto-trigger via state machine } });

// Or blend multiple animations rive.play(['main_action', 'secondary_particles']);

9. Timing

// Fast - snappy feedback rive.play('click', { speed: 1.5 });

// Normal rive.play('hover');

// Slow - dramatic reveal rive.play('reveal', { speed: 0.5 });

In Rive Editor:

• Adjust animation duration

• Use work area to fine-tune timing

• Graph Editor for precise control

10. Exaggeration

In Rive:

• Push bone rotations beyond natural limits

• Exaggerate scale transformations

• Use elastic/bounce interpolation

• Overshoot in Graph Editor curves

11. Solid Drawing

In Rive:

• Use multiple bones for volume preservation

• Apply constraints to maintain form

• Use clipping for depth illusion

• Layer shapes for 3D effect

12. Appeal

Design in Rive:

• Smooth bezier curves on shapes

• Consistent stroke weights

• Pleasing color palette

• Clean bone structure

// Smooth hover interactions const hover = inputs.find(i => i.name === 'isHovering'); element.addEventListener('mouseenter', () => hover.value = true); element.addEventListener('mouseleave', () => hover.value = false);

React Implementation

import { useRive, useStateMachineInput } from '@rive-app/react-canvas';

function AnimatedButton() { const { rive, RiveComponent } = useRive({ src: 'button.riv', stateMachines: 'Button', autoplay: true });

const hoverInput = useStateMachineInput(rive, 'Button', 'isHovering');

return ( <RiveComponent onMouseEnter={() => hoverInput.value = true} onMouseLeave={() => hoverInput.value = false} /> ); }

Key Rive Features

• State Machines - Logic-driven animation flow

• Inputs - Boolean, Number, Trigger types

• Blend States - Mix multiple animations

• Listeners - Pointer events in editor

• Constraints - IK, path, distance, rotation

• Bones & Meshes - Skeletal animation

• Runtime API - Full control from code

• Tiny file size - Optimized binary format