レスポンシブなスプライトアニメーションGSAP

Question

私は、グリーンバックGSAP Tween platformを使ってアニメートしているスプライトを持っています。この偽りは7つの異なる画像を含み、それを使ってアニメーションを作成します。スプライト上の各画像は1000pxで、1000pxのサイズです。

以下のコードがあります。

HTML

<div id="animate-wrapper"> 
    <img src="test.svg"> 
</div> 

CSS

#animate-wrapper { 
    height: 1000px; 
    width: 1000px; 
    overflow: hidden; 
} 

#animate-wrapper img { 
    height: 100%; 
    width: 700%; 
} 

JS

var animateTongueOut = new TimelineMax({paused: true}); 
var easeTongueOut = new SteppedEase(6); 
animateTongueOut.to('#animate-wrapper img', 1, { 
    x: '-6000px', 
    ease: easeTongueOut 
}) 

Answer 1

私はbackgrとしてスプライトを使用"backgroundPosition"を変更してイメージシーケンスとしてアニメーション化するためにGSAPを使用しました。

var flyingPoni = new TimelineMax({repeat:-1}); 

for (var poniX = 1; poniX < 10; poniX++) { 
     flyingPoni.to($(".poni"), 0, { 
     backgroundPosition:(-300*poniX)+"px", 
     ease: "easeOutQuint",delay:.065}); 
}; 

デモのリンク：http://codepen.io/Keinchy/pen/xGbpmK

が、これは、歓声に役立ちます願っています。