React + GSAP 기반 풀페이지 스크롤 라이브러리. 휠/터치 이벤트와 섹션 높이 계산을 통해 PC·모바일에서 자연스러운 페이지 전환을 제공하며, date-animate 속성을 활용해 개별 콘텐츠의 Fade In/Out 애니메이션을 지원합니다.
Scroll, Touched 지원하여 PC , Mobile에 대응합니다. 모바일의 경우 100vh의 url 주소창과 하단 navigation의 on off로 인한 크기 변환을 대응하여 innerHight의 크기로 페이지를 설정합니다.
gsap을 이용하여 scope와 scrollToSection을 선택하여 페이지를 생성하며 아래와 같은 타입을 지원합니다.
Section을 기준으로 “data-page=[0]” 같은 프로퍼티를 적용하여 순서를 설정합니다. absolute와 z-index로 값을 기준으로 겹쳐 쌓이는 원 페이지를 구현 할 수 있습니다.
또, 내부 콘텐츠의 길이가 h-screen 이상일 경우 스크롤과 client + top 값과 , ScrollHieght를 비교하여 페이지를 전환합니다.
인터렉티브한 효과를 위하여 Section내의 Contents의 순서 “data-animate” 의 프로퍼티를 통해 파악하고 콘텐츠의 Fade In, Fade Out을 설정합니다.
fade Effect의 방향은 Mouse의 deltaY 값을 통하여 애니메이션 방향을 결정하여 트리거합니다. 때문에, 자연스러운 애니메이션 효과를 기대할 수 있습니다.
“현재는 세로 스크롤만 지원합니다”
자세한, 내용은 아래 Git Hub - Read Me를 참조 해주세요