pmndrs/react-spring

これは何？

主な機能

• 01中断や目標値の変更があっても滑らかさを保つ、ばねベースのアニメーション。
• 02@react-spring/webによるReact DOMと、@react-spring/threeによるreact-three-fiberの両方に対応。
• 03useSpringなどの宣言的なフックに加え、必要に応じて命令的に制御可能。
• 04イージング曲線を使った、時間指定のアニメーションにも対応。
• 05TypeScriptで実装され、npmで公開。

ユースケース

• Reactコンポーネントにスクロール時の表示やフェードインのトランジションを追加する。
• トグル、展開、ドラッグ操作などに伴うUI状態の変化をアニメーションする。
• react-three-fiberのシーン内にある3Dオブジェクトをアニメーションする。

クイックスタート

1. 1

   web ターゲットをインストールする

   npm install @react-spring/web
2. 2

   animated と useSpring をインポートし、要素を animated.div でラップする

トピック

よくある質問

react-spring とは？

DOMやreact-three-fiberの要素を、宣言的にも命令的にもアニメーションできる、ばね物理ベースのReact向けライブラリ。 react-springは、固定時間ではなくばね物理を基盤とするReact向けアニメーションライブラリです。コンポーネントのスタイルの目標値を指定すると、現在の値からばねを使って目標値へ向けてアニメーションするため、アニメーションの途中で中断したり目標値を変更したりしても、動きは滑らかなままです。固定時間でのアニメーションが適している場合は、イージング曲線を使った時間指定にも対応しています。

react-spring は無料で使えますか？ライセンスは？

react-spring は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-spring は今もメンテナンスされていますか？

活発にメンテナンス中。react-spring の最終コミットは 2026年11月1日 です。

react-spring は何に使えますか？

Reactコンポーネントにスクロール時の表示やフェードインのトランジションを追加する。 トグル、展開、ドラッグ操作などに伴うUI状態の変化をアニメーションする。 react-three-fiberのシーン内にある3Dオブジェクトをアニメーションする。

react-spring のインストール方法は？

web ターゲットをインストールする: npm install @react-spring/web animated と useSpring をインポートし、要素を animated.div でラップする

react-spring はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/pmndrs/react-spring