gsap

인터랙티브한 웹을 만들기 위해 사용하는 애니매이션 라이브러리
나는 스크롤로 애니매이션을 줄거라 ScrollTrigger부터 등록했다.
React는 돔의 위치를 useRef로 알 수 있기 때문에 이 부분만 좀 다르고 나머진 일반 자바스크립트던 뷰던 같은듯

1. ScrollRtigger()

• 코드 예제

import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { Link, Element } from 'react-scroll';
// utils
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger'; 

gsap.registerPlugin(ScrollTrigger); // ScrollTrigger Trigger 호출


const Section2 = () => {
 
  const textRef = useRef(null);
  const boxRef2 = useRef(null);

useEffect(() => {

  const boxItems = gsap.context((self)=>{

    const boxes = self.selector('.skill-box'); // 애니매이션 적용 요소는 쿼리셀렉터로 등록하고
    boxes.forEach((box)=>{
      gsap.from(box, {
        x: 500,
        opacity:0,
        stagger:1,
        scrollTrigger: {
          trigger: box,
          start: 'top bottom', // 셀렉터로 등록한 요소의 상단이 뷰포트의 바닥에 있을 때 시작
          end: 'top 20%', // 상단 20프로에서 완료
          scrub: true, // 하위요소를 하나씩 순차적으로 하고 싶어서 등록
        },
      });
      gsap.to(box, {
        x: 0,
        opacity:0
      });
    })
    },boxRef2) // ref 값은 scope로만 등록한다
     return () => boxItems.revert(); // clean up
  }, []); // <- Scope!

  return (
    <Element name="section2" className="section" id="section2">
    <div className='skill-wrapper' >
      <ul className='skill-lists' ref={boxRef2}>
        <li className='empty-box'></li>
        <li className='skill-box'>
          <h3>01</h3>
          <span>첫번째 박스</span>
          <span>내용</span>
        </li>
        <li className='skill-box'>
          <h3>02</h3>
          <span>두번째 박스</span>
          <span>예제</span>
        </li>
        <li className='skill-box'>
          <h3>03</h3>
          <span>세번째 박스</span>
          <span>예제</span></li>
      </ul>
    </div>
  </Element>
  );
};

export default Section2;