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

Post on:2019年10月8日

react-genieの特徴

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

Sizzy

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

依存関係

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

react-genieのデモ

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

デモページ

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

CodeSandbox

react-genieの使い方

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

yarn add react-genie

1	yarn add react-genie

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

import {RevealGlobalStyles} from 'react-genie'

const App = () => {
  return (
    <div>
      <RevealGlobalStyles />
      <div> rest of the app </div>
    </div>
  );
};

import {RevealGlobalStyles} from 'react-genie'

const App = () => {

return (

<div>

</div>

);

};

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

import {Reveal} from 'react-genie';

<Reveal>
  <h1>The default animation is fade in</h1>
</Reveal>

import {Reveal} from 'react-genie';

<h1>The default animation is fade in</h1>

</Reveal>

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

{
  animation?: string; // animation class name
  delay?: number; // animation delay
  mode?: RevealMode; // "clone" or "wrap"
  debugName?: string; // if you specify it, you will get console logs
  style?: CSSObject; // extra styles
  onShowDone?: () => void; // callback after show
}

{

animation?: string; // animation class name

delay?: number; // animation delay

mode?: RevealMode; // "clone" or "wrap"

debugName?: string; // if you specify it, you will get console logs

style?: CSSObject; // extra styles

onShowDone?: () => void; // callback after show

}

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

import {Reveal, Animation} from 'react-genie';

<Reveal animation={Animation.SlideInLeft}>
  <h1>This title will slide in from the left</h1>
</Reveal>