React.jsでのスクロールに反応（要素が画面内に入ったら）するアニメーションの適用

前提・実現したいこと

現在htmlで書かれたWebページをReactで書き直すサイト模写課題（見た目・動きも同じものにする）を行っているのですが、画面を下にスクロールしていったときに出てくるアニメーションを、jQueryを使わずにReactで実装したいと思っています。

書き写している元サイト↓
https://taroken.org/portfolio/index.html
（About,Thoughtなどの見出し文字が出てくるアニメーション部分です。
→指定した要素が画面内に入ってきたときにopacity, font-sizeなどを設定した独自アニメーションを読み込みたい）

発生している問題・エラーメッセージ

エラーは出ていないのですが、現段階では

<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> で読み込んだAnimate.cssの定型アニメーションしか実装できないようです。

該当のソースコード

React
1return (
2        <div className={classes.about + " " + classes.parallax1}>
3          <div className={classes.aboutWrapper}>
4            <div className={classes.aboutContents}>
5              
6              <ScrollAnimation　animateIn='fadeIn'>
7                <h2 className={classes.fadeinTxt}>
8                  <span>A</span>
9                  <span>B</span>
10                  <span>O</span>
11                  <span>U</span>
12                  <span>T</span>
13                </h2>
14              </ScrollAnimation>
15
16              <Article
17                article1={articles.article1}
18                article2={articles.article2}
19              />
20
21              <LinkButton/>
22
23            </div>
24          </div>
25        </div>
26      );

試したこと

jQueryを使わないという前提でいろいろ調べた結果、react-animate-on-scrollを使えば実装できそうだなという考えに至ったのですが、既成の定型アニメーションしか使えず現在に至ります。

補足情報（FW/ツールのバージョンなど）

npm -v 6.10.2
node -v 10.16.2
上記サイトを参考に、作業中のプロジェクトにnpm install react-animate-on-scroll --saveコマンドでインストール済みで、上記コードのJSファイル内でanimate.min.cssをimportしています。

8zca

2019/09/20 15:05

スクロールして画面内に要素が入るとアニメーションするという目的はreact-animate-on-scrollを導入することで解決されていると思いますが、やりたいことはお手本サイトのようにABOUTを1文字ずつ順番に出すようなアニメーションを作りたいということでしょうか？

rin1026

2019/09/20 16:27

はい、同じ動きを実装したいので、CSSでopacity・transition-delayなどを設定したアニメーションを使用したいと考えています。

行動規範の内容に同意します

回答1件

ベストアンサー

ScrollAnimationを使って1文字ずつアニメーションさせるやり方が簡単そうですね。（delayは調整してください）

<ScrollAnimation animateIn='fadeIn' delay={1000} style={{display: 'inline-block'}}>
  <span>A</span>
</ScrollAnimation>
<ScrollAnimation animateIn='fadeIn' delay={1500} style={{display: 'inline-block'}}>
  <span>B</span>
</ScrollAnimation>

投稿2019/09/21 02:08

8zca

総合スコア559