トリガーとして使う

自動で data-is-active を付与

react-animate-observerでは、トリガーとしても使えるようにしています。
ScrollAnimatorで囲った要素が画面内に入ったら、自動でdata-is-activeが付与されます。

start, end でのスタイルだけでは表せないこともあります。例えば、

• 疑似要素を使って背景をアニメーションさせたい
• 複数の要素を同時にアニメーションさせたい
• 複雑にアニメーションさせたいので、CSS アニメーション独自で定義したい

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

// <div data-is-active="true"> // true / false切替わる
// <p>Your content goes here</p>
// </div>

アニメーションの初期値のリセット

自分で CSS を書いてアニメーションする際、初期値が不要なことがあります。
その場合、start={} end={} transition={}と指定するのは面倒です。

その際は以下のようにしてください。

<ScrollAnimator customStyle={true}>
  <p>Your content goes here</p>
</ScrollAnimator>

customStyle={true}を指定すると初期値がリセットされるので使用してみてください。

最後に、ルートマージンなどのオプション管理について紹介します！