r3f-animation
r3f-animation simplifies working with motion and keyframe sequences in React Three Fiber scenes. It provides utilities to drive animations through the render loop and load pre-built animation clips from GLTF models, letting you focus on creative timing rather than low-level graphics code.
r3f-animation simplifies 3D object animation by letting you drive motion through the render loop using useFrame. You can animate properties like position, rotation, and scale frame-by-frame, or load pre-built animation clips from GLTF models and play them back directly. This approach lets you focus on creative timing rather than low-level graphics code.
AI-generated summary based on this skill's SKILL.md
Install
zebbern/claude-code-guide/r3f-animation · repository language: Python
git clone https://github.com/zebbern/claude-code-guide
cp -r claude-code-guide/skills/r3f-animation ~/.claude/skills/r3f-animationFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you animate 3D objects in React Three Fiber?
r3f-animation simplifies 3D object animation by letting you drive motion through the render loop using useFrame. You can animate properties like position, rotation, and scale frame-by-frame, or load pre-built animation clips from GLTF models and play them back directly. This approach lets you focus on creative timing rather than low-level graphics code.
What is the useFrame animation tutorial for r3f?
r3f-animation's useFrame hook runs a callback every frame, making it ideal for smooth animations. Within useFrame, you can update object properties incrementally, apply spring physics for natural motion, or trigger keyframe sequences. The hook integrates seamlessly with React Three Fiber's render loop, ensuring animations stay synchronized with your scene.
How does r3f-animation handle GLTF model animation playback?
r3f-animation loads animation clips embedded in GLTF models and provides utilities to play, pause, and blend them. You can crossfade between animations for smooth transitions, control playback speed, and manipulate individual bones for skeletal animation effects. This eliminates manual clip management and lets you focus on sequencing and blending logic.
Can r3f-animation create spring physics and keyframe-based motion?
Yes. r3f-animation supports spring physics for natural, oscillating motion and keyframe-based animation for precise timing. You can implement smooth damping with lerp patterns, create procedural animations with sine-wave oscillations, and blend multiple motion effects. These techniques work together to produce polished, responsive animations.
How do you blend and control skeletal animations with r3f-animation?
r3f-animation provides bone manipulation tools to blend skeletal animations and attach objects to specific bones. You can crossfade between animation states, adjust bone transforms, and synchronize weapon or accessory follow-animations to character rigs. State management patterns with Zustand help organize complex animation logic.
What optimization strategies does r3f-animation offer for animation performance?
r3f-animation optimizes performance through state management patterns that reduce unnecessary re-renders and frame updates. By batching animation logic and using efficient lerp calculations, you avoid bottlenecks in complex scenes. The library is MIT-licensed and designed to scale from simple rotating cubes to character rigs with multiple blended animations.
SKILL.md
rendered from the published skill — quoted content, verbatim
React Three Fiber Animation
Quick Start
import { Canvas, useFrame } from '@react-three/fiber'
import { useRef } from 'react'
function RotatingBox() {
const meshRef = useRef()
useFrame((state, delta) => {
meshRef.current.rotation.x += delta
meshRef.current.rotation.y += delta * 0.5
})
return (
<mesh ref={meshRef}>
<boxGeometry />
<meshStandardMaterial color="hotpink" />
</mesh>
)
}
export default function App() {
return (
<Canvas>
<ambientLight />
<RotatingBox />
</Canvas>
)
}
useFrame Hook
The core animation hook in R3F. Runs every frame.
Basic Usage
```tsx import { useFrame } from '@react-three/fiber' import { useRef } from 'react'
function AnimatedMesh() { const meshRef = useRef()
useFrame((state, delta) => { // state contains: clock, camera, scene, gl, mouse, etc. // delta is time since last frame in seconds
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/r3f-animation/SKILL.md