基本の使い方

React Animate Observer は「アニメーションをもっと簡単に」することをテーマに作成されています。
ですので特に難しい設定などいりません。
まずは基本的な使い方を見ていきましょう。

インポート

まずはインポートしましょう。
ScrollAnimatorのみインポートすれば OK です。

import { ScrollAnimator } from 'react-animate-observer';

基本的な使い方

以下のようにすると、ScrollAnimatorの中に入れた要素が画面に表示された時にアニメーションが実行されます。

const YourComponent = () => {
  return (
    <ScrollAnimator
      start={{ opacity: 0, translateY: 40 }}
      end={{ opacity: 1, translateY: 0 }}
      transition={{
        transitionDuration: 0.6,
        transitionTimingFunction: 'ease-in-out',
      }}
    >
      <div>Your content goes here</div>
    </ScrollAnimator>
  );
};

これを実装すると以下のようになります

Your content goes here

---

アニメーションのデフォルト値

ScrollAnimatorは、startとendとtransitionの 3 つのプロパティを持っています。
これらは、初期値を持っているため、何も渡さなくても動きます。

<ScrollAnimator>
  <div>Your content goes here</div>
</ScrollAnimator>

Your content goes here

初期値は以下のようになっています。

  start = { opacity: 0, translateY: 30 },
  end = { opacity: 1, translateY: 0 },
  transition = {
    transitionDelay: 0.1,
    transitionDuration: 0.4,
    transitionTimingFunction: 'ease-in',
  },

アニメーションの受け取れるプロパティ

start・end

tranistion 以外の CSS プロパティを受け取ることができます。
さらに、transofrm 関連のスタイルを定義しやすいように、react-animate-observerが独自で定義したプロパティが使えます。

詳細は、カスタムスタイル要素をご覧ください。

transition

tranistion では、以下のような型で受け取ることが可能です。
transitionDelayとtransitionDurationのみ指定しやすいように number 型にしています。

type TransitionProps = Partial<{
  transitionDelay: number;
  transitionDuration: number;
  transitionProperty: CSSProperties['transitionProperty'];
  transitionTimingFunction: CSSProperties['transitionTimingFunction'];
  transition: CSSProperties['transition'];
}>;

基本的には、JSX の style 属性に渡すものと同じです。型補完も効くため、直感的に使うことができます。

アニメーションのタイミングをずらす

例えば、複数の要素が横並びの際に、アニメーションのタイミングをずらしたい場合があります。
その場合は、transitionDelayを使うことで、タイミングをずらすことができます。

特に、mapを使う際は、indexを使うことで、簡単にタイミングをずらすことができます。

Your content goes here

Your content goes here

Your content goes here

const YourComponent = () => {
  return (
    <div>
      {['a', 'b', 'c'].map((item, index) => (
        <ScrollAnimator
          key={item}
          transition={{
            transitionDelay: 0.4 + index * 0.2, // 0.2秒ずつずらす
          }}
        >
          <div>{item}</div>
        </ScrollAnimator>
      ))}
    </div>
  );
};

続いて、react-animate-observerで定義しているカスタムスタイル要素についてみていきましょう 🕹️