react で Scroll Triggerを使用します。

gsapインストール

ターミナルを開いて、以下コマンド実行

npx create-react-app scrolltrigger-react

一番下に “Happy hacking!” が出てきたら、以下２行も実行

cd scrolltrigger-react
code .

開いたエディタでターミナルを開き、以下コマンド実行

npm start

すると、http://localhost:3000/ が開いたと思います。
次にgsapのインストールです。
ターミナルを分割し、( 1:29 )
新しく開いた方で以下実行

npm install gsap

package.json の 6行目に gsapが追加されていると思います。
その次の行でも、react, react-dom, react-scripts　などがインストールされているのが分かります。

src > app.js
このファイルには回転しているロゴや、文字などの
ブラウザに表示されているすべてのdom要素が含まれています。
これを画像のみにしましょう。

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
    </div>
  );
}

export default App;

gsap でアニメーション

今からこのロゴをgsapでアニメーションさせていきます。

src > App.css
10行目あたりの、回転するアニメーションをコメントアウト

/* @media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
} */

src > App.js
gsap 、useRef、useEffecct をインポート（3行目）

import gsap from 'gsap';
import {useRef, useEffect} from 'react';

imgに ref属性を追加します。(10行目)

<img src={logo} className="App-logo" alt="logo" ref={imgRef}/>

constでimgRef を定義し、useRefと等しく設定。値をnull で初期化します。(7行目)

const imgRef = useRef(null);

このとき、constと、ref属性の値が “imgRef” と同じになっているのが大切です。
useRef(null) の部分を、ref属性が参照するようになっています。

5:30
次に useEffectを使って作業しましょう。

constで定義したあとの、8行目に useEffectを記述し、コールバック関数を渡します。
2番目の引数として、空の配列[]を渡します。
その中に el (element) を定義し、画像を参照できるようにします。
その後、gsapで回転させます。
3秒かけて180度回転します。

  useEffect(() => {
    const el = imgRef.current;
    gsap.fromTo(el, {rotation: 0}, {rotation:180, duration: 3})
  },[])

localhostを見てみると、ロゴが回転していると思います。

スクロールして、見えたら動くように

.helperを追加して、スクロールする高さを出します。

App.js
<div className=”App”>の下に以下追加

<div className='helper'></div>

App.css (15行目)

.helper {
  height: 100vh;
  background-color: orange;
}

次にScrollTriggerをimportします。

App.js
4行目

import { ScrollTrigger } from 'gsap/ScrollTrigger';

6行目

gsap.registerPlugin(ScrollTrigger)

12行目に加筆。el(画像)が見えたときに回転

    gsap.fromTo(el, {rotation: 0}, {rotation:180, duration: 3, scrollTrigger: {
      trigge: el
    }})