Greensock GSAP + SVG 경로 애니메이션 + Scroller

Question

지금 JS 애니메이션 메서드를 배우고 있으며 GSAP 라이브러리의 TimelineLite() 및 staggerTo()를 사용하여 SVG 경로를 순차적으로 그리고 그려주는이 작은 코드를 작성했습니다.

$('#svg path').each(function() { 
      var path = $(this)[0]; 
      preparepath(path); 
}); 

function preparepath(path) { 
    var pathlength = path.getTotalLength(); 
    path.style.strokeDasharray = pathlength + ' ' + pathlength; 
    path.style.strokeDashoffset = pathlength; 
    path.style.fill = "#fff"; 
} 

var paths = $('#svg path'); 
var tl = new TimelineLite(); 
tl.staggerTo(paths, 0.5, {strokeDashoffset:"0"}, 0.3).staggerTo(paths, 0.5, {fill:"#000"}, 0.2); 

지금 내가 풀려고하는 질문은 창을 스크롤하는 동안 SVG 경로를 그리는 방법입니다. Bright Media http://brightmedia.pl에 의해 훌륭한 웹 사이트에 의해 나는 그들이 GSAP와 함께 CreateJS를 사용하고 있음을 알았지 만 드로잉이 얼마나 정확한지 알 수는 없습니다.

Skrollr 플러그인을 사용하여 해결 방법이 있지만 GSAP을 사용하려고합니다.

스크롤을 사용하여 SVG 또는 캔버스를 그리는 방법에 대한 모든 정보를 얻으실 수 있습니다. 또한 위의 개선 방법에 대한 아이디어도 있습니다! 나는 아름다운 마음을 신뢰한다!

Answer 1

stroke-dash-offset 및 stroke-dasharray 속성에 애니메이션을 적용 할 수 있습니다. 그 수행 방법에 대한 자습서가 있습니다 here. 나는 또한 같은 주제에 다른 하나를 발견했다. here.