Greensock GSAP + SVG路径动画+滚动条

我正在学习JS动画方法，并且我已经编写了这个使用GSAP库中的TimelineLite（）和staggerTo（）按顺序绘制和填充SVG路径的代码。现在Greensock GSAP + 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的一个美妙的网站炒作，在那里我看到他们正在使用CreateJS和GSAP，但我无法弄清楚绘图是如何发生的。

有一个使用Skrollr插件的解决方案，但我想尝试使用GSAP。

任何关于如何绘制SVG或画布与滚动的指针将高度赞赏！此外，还有关于如何改进上述内容的任何想法！我相信美丽的头脑！

来源

2014-03-12 Dmitry Lambrianov

您可以动画stroke-dash-offset和stroke-dasharray属性。有一个关于如何做到这一点的教程here。我还在同一主题here上发现了另一个。

来源

2014-06-25 10:55:21

Greensock GSAP + SVG路径动画+滚动条

回答

相关问题