scroll Draw SVG에서 실선이 아닌 점선으로 그리고 싶어요
안녕하세요.
강의를 통해 gsap을 입문한 학생입니다.
현재 강의는 스크롤 시 실선이 나타나는데
점선으로 나타내고 싶습니다.
현재 강의에서의 설정부분인데
pathLength = document.querySelector(element).getTotalLength();
gsap.set(element,{
strokeDasharray:pathLength,
strokeDashoffset:pathLength,
})
strokeDasharray 설정 부분에 dashArray 간격이 16을 넣었더니 이미 실선이 그려진채로 나오더라구요.
드래그하면서 실선이 그려져야하는데...
실선이 아닌 점선으로도 구현할 수 있는지 궁금합니다
답변 1
1
안녕하세요 ssooya90 님 😀
strokeDasharray만으로는 dotted stroke의 애니메이션을 구현하기에 한계가 있습니다.
(점들이 모여 선을 이루는 구조이기 때문에 그렇습니다)
그래서 점선 한칸씩 애니메이션의 반복을 주어 dotted stroke를 그려나가는 방식을 사용해야 합니다.
아래의 코드를 참고해보세요
https://codepen.io/kindtigerr/pen/bNbaowq
감사합니다 :)
섹션04 Layout에서 Mixed Layout파트의 실습 index.html파일 열었을때 선생님께서 보여주시는 가로스크롤이 안나타남.
0
84
3
안녕하세요 ScrollSmoother에 대해 질문드릴게요
1
199
2
GSAP 플러그인의 무료화 관련
2
222
3
barba와 ScrollSmoother 사용했을 때 스크롤 업데이트
0
110
2
barba.js 사용시 페이지이동
1
203
2
이상한 부분이 있어서 문의드립니다.
1
100
1
smooth-scrollbar 관련 질문
1
224
2
imagesLoaded 에 관해 질문드려요
1
102
1
파트 4 오픈 일정 문의
1
142
2
GSAP을 사용하면서 리사이징 시 애니메이션 값 재할당에 대해 질문드립니다.
1
190
2
스무스 스크롤바 모바일에서 뻑뻑한 느낌이 들어요!
1
244
2
OneScroll Layout 질문 드립니다!
1
160
2
OneScroll Layout (1) 관련 재질문드립니다.
2
164
1
OneScroll Layout (1) 강의중 질문 드립니다.
1
262
1
이미지 엑박
1
186
1
UI관련 문의드립니다..!
1
234
2
OneScroll Layout 모바일 터치
1
467
2
노션 링크 보는 곳
1
384
1
반응형 관련해서 질문드립니다.
1
556
2
ScrollTrigger의 end와 toggleClass
1
945
1
Text Effects(2)는 Text Effects(1)영상에 포함돼있는 것 같아요!
1
264
1
nav위에 마우스를 올리면 스크롤이 안돼요 😢
1
488
2
ScrollTrigger의 animation에 함수호출
1
446
1
영상 순서 오류
1
386
1