gsap로 스크롤 애니메이션 구현하기 + Tailwind Media Query로 모바일 반응형 구현

1️ GSAP로 스크롤 애니메이션 구현하기 GSAP가 무엇인가? GSAP(GreenSock Animation Platform)는 자바스크립트 기반의 애니메이션 라이브러리다.

CSS 애니메이션보다 더 정교하고 유연한 애니메이션을 만들 수 있어서 많이 사용된다. 특히 React와 함께 사용하면 컴포넌트의 상태 변화와 상호작용하며 자연스럽고 인터랙티브한 UI를 구현할 수 있다.

이번에는 GSAP를 사용하여 스크롤 애니메이션을 구현해 보았다. 스크롤할 때 텍스트와 버튼이 순차적으로 나타나는 인터랙티브한 효과를 목표로 했다.

구현 목표 스크롤 시 다음과 같은 애니메이션을 구현했다 1️ 타이틀 텍스트(멋쟁이 사자 사주처럼)가 아래에서 위로 자연스럽게 나타남 2️ 서브타이틀 텍스트("오늘의 사주 운세를 확인하고, 친구에게 공유하자!")가 타이틀 뒤에 이어서 등장 3️ 버튼("멋사주 시작하기")이 마지막에 부드럽게 나타남 1️ 초기 세팅: GSAP 설치 및 기본 설정 GSAP 설치 먼저 프로젝...