[frame by frame animation]

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

[frame by frame animation]

 

 

Animating large <img> tags or background-images can give you slow choppy performance

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?

[frame by frame animation]

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?

[frame by frame animation]

here's the codepen aniway:

See the Pen RrqYrG by metallicasepultura (@metallicasepultura) on CodePen

 
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?

[frame by frame animation]

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

[frame by frame animation]

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()?