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

• Exponential Smoothing
• Lerp Smoothing is Broken

This skill is part of verekia's r3f-gamedev.