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路徑動畫+滾動條

回答

相關問題