scroll Draw SVG에서 실선이 아닌 점선으로 그리고 싶어요

Question

안녕하세요.

강의를 통해 gsap을 입문한 학생입니다.

현재 강의는 스크롤 시 실선이 나타나는데
점선으로 나타내고 싶습니다.

현재 강의에서의 설정부분인데

pathLength = document.querySelector(element).getTotalLength();

gsap.set(element,{

strokeDasharray:pathLength,

strokeDashoffset:pathLength,

})

strokeDasharray 설정 부분에 dashArray 간격이 16을 넣었더니 이미 실선이 그려진채로 나오더라구요.

드래그하면서 실선이 그려져야하는데...

실선이 아닌 점선으로도 구현할 수 있는지 궁금합니다

범쌤 · Answer

안녕하세요 ssooya90 님 😀

strokeDasharray만으로는 dotted stroke의 애니메이션을 구현하기에 한계가 있습니다.

(점들이 모여 선을 이루는 구조이기 때문에 그렇습니다)

그래서 점선 한칸씩 애니메이션의 반복을 주어 dotted stroke를 그려나가는 방식을 사용해야 합니다.

아래의 코드를 참고해보세요

감사합니다 :)

인프런 커뮤니티 질문&답변