r3f-animation

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'