R3f Animation

Covers the three main ways to animate in React Three Fiber: useFrame for per-frame updates, useAnimations for GLTF model animations with crossfading and blending, and react-spring/three for physics-based motion. The examples are practical, showing rotation loops, animation state management, and spring configs you'd actually use. What's useful here is seeing how to blend multiple GLTF animations based on character speed, and understanding useFrame's render priority system. If you're making anything that moves in R3F beyond basic position tweens, you'll need at least two of these approaches. The spring integration is the cleanest way to handle UI-style animations in 3D space.

skills.sh installs: 2.2K
GitHub stars: 135
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add enzed/r3f-skills --skill r3f-animation --agent claude-code

Installs into .claude/skills of the current project.

Files

React Three Fiber animation

Check installed Fiber, Drei, and React versions first. These examples target Fiber 9 / React 19. Keep the project's animation library when it already meets the task.

Choose an owner

Use useFrame and refs for continuous transforms/uniforms; React state describes discrete goals such as selected, open, or active.
Use Drei useAnimations for authored GLTF clips. Read clip playback for independent animated instances and cleanup.
Use the project's spring/tween library for coordinated transitions; check its React peer dependencies before adding it. Do not introduce a state manager merely to animate a mesh.
Let Rapier own simulated body transforms. Animate kinematic targets through physics APIs rather than fighting the simulation with mesh positions.

Damping that can return to idle

Mount below Canvas; this also works with frameloop="demand". Click the box to change its target.

import { useEffect, useRef, useState } from 'react'
import { useFrame, useThree } from '@react-three/fiber'
import { MathUtils, type Mesh } from 'three'

SKILL.md on GitHub