Smooth Interpolation
Animate values smoothly using exponential decay instead of linear interpolation.
Technique
Use exponential smoothing formulas to interpolate between current and target values. This creates a natural easing effect that's frame-rate independent.
Key Concepts
- Exponential smoothing:
(target - current) * (1 - Math.exp(-speed * dt)) - Exponential decay:
target + (current - target) * Math.exp(-decay * dt) - Both formulas produce the same result with different parameters
- Speed/decay values from 1-25 work well
- Frame-rate independent due to delta time usage
Usage
const addSmoothExp = (current: number, target: number, speed: number, dt: number) =>
(target - current) * (1 - Math.exp(-speed * dt))
const expDecay = (current: number, target: number, decay: number, dt: number) =>
target + (current - target) * Math.exp(-decay * dt)
useFrame((_, delta) => {
mesh.position.x += addSmoothExp(mesh.position.x, targetX, 3, delta)
// or
mesh.position.x = expDecay(mesh.position.x, targetX, 3, delta)
})References
This skill is part of verekia's r3f-gamedev.