coding/web

javascript 스크롤 애니메이션 스크롤 내릴때 선 채우기 progress bar gsap scrollTrigger scroll animation

100a 2023. 12. 3. 14:42

 

세로 progess bar

 

 

 

주로 연혁이나 절차 등에서 스크롤을 내릴때 흐름을 표현할 때 사용하는

스크롤 애니메이션입니다.

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.