gasp使い方

とりあえずざっくりコード

import {gsap} from "gsap";
import { useEffect, useRef } from "react";
import ScrollTrigger from "gsap/src/ScrollTrigger";
/** @jsImportSource @emotion/react */
import { css} from "@emotion/react";


export default function Top() {

    useEffect(() => {
        gsap.registerPlugin(ScrollTrigger);

        // 各画像要素のアニメーション
        const scrollphotos = gsap.utils.toArray(".scrollphoto");
        scrollphotos.forEach((el) => {
            const tl = gsap.timeline();
            ScrollTrigger.create({
                trigger:el,
                start: "top center",
                end: "bottom center",
                once: true,
                onEnter: () => {
                    const h3element = el.querySelector('.scrollphoto-title');
                gsap.fromTo(h3element, {width:"0", overflowX: "hidden"}, {width:"200px", delay:1.5, duration:2});
                popup(el);
                }
            });

            function popup(el) {
                tl.fromTo(el, {x:-1000, autoAlpha:0}, {x:0, ease:"boue.inOut", duratioin:1.5, autoAlpha:1})
            }
        }, []);
        const tl2 = gsap.timeline();
        tl2.to('.my-element2 span', {x:100, ease:"bouce.out", fontSize:'2.5em', duration:2})
    });

    return ( 
        <div css={wrapBox}>
            <div className="my-elemtent2" css={fontBox}>
                <span>Hello,world</span>    
            </div>
            <div className="scrollphoto" css={scrollphoto}>
                <h3 className="scrollphoto-title" css={photoTitle}>Photo1</h3>
                <img src="images/card-1.webp" alt="" />
            </div>
            <div className="scrollphoto" css={scrollphoto}>
                <h3 className="scrollphoto-title" css={photoTitle}>Photo2</h3>
                <img src="images/card-2.webp" alt="" />
            </div>
            <div className="scrollphoto" css={scrollphoto}>
                <h3 className="scrollphoto-title" css={photoTitle}>Photo3</h3>
                <img src="images/card-3.webp" alt="" />
            </div>
        </div>
        
    )
}