Hello 100A

다음 섹션이 이전 섹션을 덮는듯하게 보이는 효과입니다. https://unpkg.com/gsap@3/dist/gsap.min.js https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js 두 라이브러리를 사용했습니다. 한 섹션만 덮는 효과를 내고 싶으면 sec3->sec4 sec3을 sec4가 덮는 느낌을 내고 싶다면 let panels = gsap.utils.toArray(".section"); .section 부분에 .sec3 을 넣어줘야합니다. html section 1 section 2 section 3 section 4 css body{ padding:0; margin:0; } .section{ width:100%; height:100vh; position:re..

주로 연혁이나 절차 등에서 스크롤을 내릴때 흐름을 표현할 때 사용하는 스크롤 애니메이션입니다. gsap의 timeline을 이용해서 작업했습니다. 먼저 https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js 을 꼭 추가합니다. See the Pen Untitled by baekah (@baekah) on CodePen.