rive-animations

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:

1. Create "Idle" state
2. Create "Anticipate" state (wind-up pose)
3. Create "Action" state
4. 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']);