スクロールしてビューポートに要素が入る際に、さまざまなアニメーションを適用するためのReactコンポーネントを紹介します。Appleのプロダクトページなどで見かけるようなアニメーションが揃っています。 react-genie -GitHub react-genieの特徴 react-genieのデモ react-genieの使い方 react-genieの特徴 react-genieは、ビューポートにスクロールする要素をアニメーション化するためのReactコンポーネントです。SizzyやReact Academyの@thekitze氏の新しいプロジェクトで、Sizzyにもこのreact-genieが使用されています。 Sizzy タイミングをずらして表示させたり、非表示の要素を表示させたり、右・左から表示させたり、フェードインさせたり、さまざまなアニメーションが実装されています。 依存関係
![スクロールしてビューポートに要素が入る際に、アニメーションを適用するReactコンポーネント「react-genie」](https://cdn-ak-scissors.b.st-hatena.com/image/square/f78cea6adb8395fb4d04a5602b6a7347cf13e5ac/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201904%2F2019100806.png)