本文へ移動

§16-05Motion

Spring physics scroll

ばねの物理でスクロールを滑らかに追従させる。

操作に自然な加減速が付き、画面の動きが機械的に感じられなくなる。カルーセルやシートなど、位置が目標値に収束する動きに向く。

実装のポイント

ばねは stiffness と damping で挙動が決まり、damping が低いほど行き過ぎて揺れる。スクロールに適用する場合はスクロール位置を目標値として追従させる。

特徴
  • アニメーション
デモで使っているもの
  • motion
  • lucide-react