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

Post on:2019年10月8日

sponsors

Adobe XD 8月アップデート　CSS自動生成　Photoshopで画像編集　コンポーネントの操作性向上

スクロールしてビューポートに要素が入る際に、さまざまなアニメーションを適用するためのReactコンポーネントを紹介します。Appleのプロダクトページなどで見かけるようなアニメーションが揃っています。

react-genie -GitHub

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>

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

<h1>This title will slide in from the left</h1>

</Reveal>

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

react-genieの特徴

依存関係

react-genieのデモ

react-genieの使い方

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

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Links

Category

Blog Info

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

react-genieの特徴

依存関係

react-genieのデモ

react-genieの使い方

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

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Links

Category

Blog Info