Davide_Barbieri

thanks i'll try to use it to reduce to final spritesheet size

yeah true, but my problem is that the image in question need to cover the background, if i use little images into spritesheet and scale them, they become grainy. and i don't think i can make a spritesheet of 60 1280x720 images.... right?

ok, thanks for the info... i'll try to use the sprite sheet version aniway, if i want to stop at a frame, and the resume with a second click, how can i do it?

here's the codepen aniway: http://codepen.io/metallicasepultura/full/RrqYrG/ basically after each click, the columns image changes, giving a moving effect, but i want to make it in a way that it starts going frame by frame after 1 click, not every click, but i think the one spritesheet solution it's better, right?

thanks for both the answers i'll try them. aniway, my images are not little sprites, they are 1280x720 since they are backgrounds, is it too heavy? also, i'm going to post the codepen soon

i need to make an animation frame by frame, basically after pressing the mouse the animation starts by changing background image like some kind of stop motion by using this code: document.addEventListener('click', function() { if(counter<1){ audioElement.play(); var cancello=document.getElementById("cancello1"); //var cancello2=document.getElementById("cancello2"); TweenMax.to(cancello, 3, {rotationY:125, transformOrigin:"left top",opacity:0}) TweenMax.to(cancello2, 3, {opacity:0}) contatore++; } else if(counter<2){ TweenLite.set($("#porta"), {css:{backgroundImage:'url(img/KDS_Grafiche29.png)'}}); <--this one audioElement.setAttribute('src', '235.wav'); audioElement.play(); //var porta = document.getElementById("porta"); //TweenLite.to(porta,5,{opacity:1,scaleX:2,scaleY:2}); contatore++; } else if(counter<3){ TweenLite.set($("#porta"), {css:{backgroundImage:'url(img/KDS_Grafiche212.png)'}}); <-- second frame var titolo = document.getElementById("titolo"); TweenLite.to(titolo,2,{opacity:1}); contatore++; } else if (counter<4){ TweenLite.set($("#porta"), {css:{backgroundImage:'url(img/KDS_Grafiche220.png)'}}); <-- third frame } } the problem is that the image flash for second before appearing, also... how can i impost an automatic cycle in which the images appear one by one, since the actual cycle only increases at every click. or there's a better way to do this without using tweenlite.set()?