React에서 GSAP 사용하기

React에서 GSAP 사용하기

GSAP 설치하기

npm install gsap

GSAP 사용하기

import { gsap } from 'gsap';

gsap.to('.box', { x: 100 });

• GSAP을 전역으로 사용하기 위해선 index.js에 아래 코드를 추가해야 한다.

// index.js
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

• GSAP을 사용할 header.jsx 파일을 만들고 아래와 같이 코드를 작성한다.
• 스크롤 이벤트 핸들러를 만들어서 스크롤이 100px 이상이면 헤더의 배경색을 검정색으로 변경한다.

// header.jsx
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import Gnb from './Gnb';
import { Heading } from '@chakra-ui/react';
import gsap from 'gsap';

const Header = () => {
    // 스크롤 이벤트 핸들러
    const handleScroll = () => {
        const scrollY = window.scrollY; // 스크롤 위치
        const headerWrap = document.querySelector('.header-wrap'); // 헤더 요소

        if (scrollY >= 100) {
            // 스크롤 위치가 100px 이상이면
            // 헤더 요소의 배경색을 검정색으로 변경
            gsap.to(headerWrap, { backgroundColor: '#000', duration: 1 });
        } else {
            // 스크롤 위치가 100px 미만이면
            // 헤더 요소의 배경색을 투명으로 변경
            gsap.to(headerWrap, { backgroundColor: 'transparent', duration: 1 });
        }
    };

    // 이벤트 리스너 등록
    window.addEventListener('scroll', handleScroll);

    return (
        <HeaderWrap className="header-wrap">
            <Heading as={'h1'}>
                <Link to="/">Logo</Link>
            </Heading>
            <Gnb />
        </HeaderWrap>
    );
};

const HeaderWrap = styled.header`
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0 20px;

    h1 {
        a {
            font-size: 30px;
            font-weight: bold;
        }
    }
`;

export default Header;