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;