🕹️
React Animate Observer
詳細はドキュメントをご覧ください
React Animate Observer は React のカスタムフックを使用した Intersection Observer ライブラリで、スクロールによって要素がビューポートに入るときにアニメーションをトリガーします。
インストール
以下のコマンドを使用して React Animate Observer をプロジェクトにインストールします。
// npm
npm install react-animate-observer
// yarn
yarn add react-animate-observer
使い方
基本的な使用方法は以下の通りです。
import { ScrollAnimator } from 'react-animate-observer';
const YourComponent = () => {
return (
<ScrollAnimator
start={{ opacity: 0, translateY: 40 }}
end={{ opacity: 1, translateY: 0 }}
transition={{
transitionDelay: 0.4,
transitionDuration: 0.8,
transitionTimingFunction: 'ease-in-out',
}}
>
<div>Your content goes here</div>
</ScrollAnimator>
);
};
上記の例では、スクロールがビューポートに入るときにアニメーションがトリガーされます。
通常は、CSSProperties
を継承しているので React でのstyle={}
と同じように使えます。
transition
のプロパティごとに値を変えたい場合は、基本通りtransition
で動きます。
ただし、translateY
やscaleY
などはセルフメイドのため transform
として指定してください。
詳細な設定がしたい場合は CSS でカスタマイズしてください。
transition: 'opacity .3s ease, transform .5s ease',
Props
以下の props を ScrollAnimator に渡すことができます。
# start:
アニメーションの初期状態を定義します。このプロパティは、CSSのスタイルオブジェクトを受け入れます。
# end:
アニメーションの終了状態を定義します。このプロパティは、CSSのスタイルオブジェクトを受け入れます。
# transition:
アニメーションの遷移プロパティを定義します。このプロパティは、CSSのトランジションプロパティを受け入れます。
# as:
描画するHTML要素を定義します。デフォルトはdivです。
# customStyle:
customStyleをtrueにすることで`start`/`end`/`transition`の初期値をなくすことができます(デフォルトはfalse)。
# observerOptions
オブザーバーの設定値を変更できます。詳細は次の項目をご覧ください。
observerOptions
オブザーバーの設定値を変更するためのオブジェクトです。
デフォルトの値は以下のようになっています。
mediaQueryWidth: 768, // min-width()の値になります
largeScreenRootMargin: '-35% 0px', // PCサイズのルートマージン
smallScreenRootMargin: '-25% 0px', // Mobileサイズのルートマージン
threshold: 0, // 閾値
once: true // アニメーションを1回のみ実行するか
これらの値を変更したい場合はobserverOptions
でオブジェクトを渡してください。
例えば、src > constants > optionObserver.ts
を作成します。
export const observerOptions = {
mediaQueryWidth: 820,
largeScreenRootMargin: '30% 0px',
smallScreenRootMargin: '-20% 0px',
threshold: 0.5,
once: false,
};
あとはインポートして呼び出す際に props として渡してください。
<ScrollAnimator observerOptions={observerOptions} customStyle={true}>
<div>Your content goes here</div>
</ScrollAnimator>
また、先述していますがcustomStyle
をtrue
にすることで初期値をなくすことが可能です。
カスタム HTML 要素の使用
as
prop を使用して任意の HTML 要素を描画することができます。
<ScrollAnimator as="section">
<p>Your content goes here</p>
</ScrollAnimator>
上記の例では、section 要素がアニメーションの対象となります。
また、start
/ end
/ transition
を渡さなければデフォルトのアニメーションが実行されます。
データ属性の自動付与
このライブラリは、要素がビューポートに入るとdata-is-active
属性が true
になります。
これにより、CSS または JavaScript でアニメーションをフックすることが容易になります。
要素がビューポートから外れると、この属性はfalse
になります。
今後の計画
React Animate Observer は現在開発中であり、今後も機能が追加される予定です。
フィードバックや提案がありましたら、ぜひ GitHub の Issues を通じてお知らせください。