Отзывчивая анимация спрайтов 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 а затем использовать GSAP для анимации в качестве последовательности изображений, изменив «backgroundPosition».

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

надеюсь, что это помогает, веселит.