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