スクロールしてビューポートに要素が入る際に、アニメーションを適用するReactコンポーネント「react-genie」

スクロールしてビューポートに要素が入る際に、さまざまなアニメーションを適用するためのReactコンポーネントを紹介します。Appleのプロダクトページなどで見かけるようなアニメーションが揃っています。

サイトのキャプチャ

react-genie -GitHub

react-genieの特徴

react-genieは、ビューポートにスクロールする要素をアニメーション化するためのReactコンポーネントです。SizzyReact Academy@thekitze氏の新しいプロジェクトで、Sizzyにもこのreact-genieが使用されています。

Sizzy

タイミングをずらして表示させたり、非表示の要素を表示させたり、右・左から表示させたり、フェードインさせたり、さまざまなアニメーションが実装されています。

依存関係

  • styled-components
  • layout-styled-components
  • react-animations
  • react-intersection-observer

react-genieのデモ

デモでは、react-genieのさまざまなスクロールアニメーションが楽しめます。

サイトのキャプチャ

デモページ

デモはCodeSandboxにも用意されています。

react-genieの使い方

パッケージを依存関係に追加します。

RevealGlobalStylesコンポーネントを任意の場所にレンダリングするだけで、アニメーションのクラス名が追加されます。

デフォルトのアニメーションは、下記のように実装します。

アニメーションのオプション

アニメーションのオプションを使用してアニメーションを指定します。

sponsors

top of page

©2020 coliss