こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 今回は、Framer Motionで提供されているhooksを使用してみたいと思います。 Framer Framerとは、コードベースのUIデザインツールになります。Framer側、React側それぞれでデザインをインポートし、取り込めるのが特徴です。 以下の記事がわかりやすいです。 Framer Motion Framer Motionは、Framerで作成したコンポーネントに対応したReactアニメーションライブラリです。 基本的な動作については、こちらの記事で紹介されています。 Framer Motionにはコンポーネントに渡すprops以外にも、面白いhooksを提供しています。 今回は以下の3つを試してみました。 useCycle useReducedMotion useDragControls 使用