React에서 GSAP ScrollTrigger 사용법

포인트는 gsap.registerPlugin(ScrollTrigger)로 ScrollPlugin을 연결해주는 것!

import React from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from "gsap/ScrollTrigger";

const Main: React.FC = () => {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
 
    const targets = document.querySelectorAll('#scroll-trigger');

    targets.forEach(el => {
      gsap.fromTo(el, {
        autoAlpha: 0,
      }, {
        duration: 1,
        autoAlpha: 1,
        ease: 'none',
        scrollTrigger: {
           trigger: el,
        }
      })
    })
  }, []);

  return (
    <div className={cx('main')}>
      <div className={cx('pc_wrapper')} id="scroll-trigger">
        <PCHeader />
      </div>
      <div className={cx('mobile_wrapper')} id="scroll-trigger">
        <MobileHeader />
      </div>
      <div className={cx('pc_wrapper')} id="scroll-trigger">
        <PCPortfolidSlider />
      </div>
      <div className={cx('mobile_wrapper')} id="scroll-trigger">
        <MoPortfolidSlider />
      </div>
    </div>
  );
};

export default Main;