Use when implementing Disney's 12 animation principles with Rive interactive 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 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 3. Staging In Rive: Use artboard layers for depth Apply blur/opacity to background layers Use nested artboards for complex scenes 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 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: 9. Timing 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 React Implementation 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

rive-animations