Jump to content
GreenSock

Davide_Barbieri

frame by frame animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hello Davide_Barbieri, and welcome to the GreenSock forum!

 

In the below example you can see how to animate an image sprite using GSAP.

 

See the Pen zrGGmQ by jonathan (@jonathan) on CodePen

 

And what the code would look like to animate a image sprite, like stop animation. It animates the CSS background-position property and uses a SteppedEase ease.

// create a timline in a paused and infinite state
var tl = new TimelineMax({
  paused: true,
  repeat: -1,
  repeatDelay: -1,
  yoyo: true
});

// create tweens for your timeline
// animate the CSS background-position property
// and use a SteppedEase ease
tl
.to("#spritetarget", 1.3, {
    backgroundPosition: "-4900px 0",
    ease: SteppedEase.config(10)
});
.set("#spritetarget", {
    backgroundPosition: "0 0"
});
.to("#spritetarget", 1.3, {
    backgroundPosition: "-4900px 0",
    ease: SteppedEase.config(10)
});

// pre-cache and pre-record values and properties for GSAP
tl.progress(1).progress(0);

// play your timeline
tl.play();

We love code we can see and test live. Here is a nice video tut by GreenSock on how to create a codepen demo so we can help you better by seeing your code in context.

 

 

Thanks ! :)

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Animating large <img> tags or background-images can give you slow choppy performance, even if animated using the GPU (hardware acceleration). But that is not a GSAP limitation, but has to do with the size of having to animate a large background image using a lot of the CPU. I'm sure if you post your code example we can offer some tips and tricks to help you animate with GSAP.

 

The image i am using in that fire sprite-sheet animation is 4900px by 250px.

 

:)

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

The reason a image sprite sheet is better, is due to having all those image load. When the sprite sheet loads, all images within that sprite sheet will be loaded since they will be visible and in view. The problem with using separate images instead of a sprite-sheet is that when the images start to show, the browser will trigger a load event for that image sometimes, mostly causing a image flicker, which is that image loading.

 

The only way to get around that is to have your images visible and in view but give them a CSS property of visibility hidden. This way the page will load and your image will be loaded. Normally if your image is not part of the DOM or has a CSS display of none. That will cause the image flicker in browsers, since an element with display none will be removed from the render tree.

 

So a image sprite is always better since your only loading one image, so only one server request. And the image will be available without flickering when the browser displays your image or parts of that image sprite-sheet, since the image already would have been loaded.

 

:)

  • Like 2
Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

 

 

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?

Link to comment
Share on other sites

You can try to reduce, optimize the images file size to help some. Try this free online image optimizer.

 

http://tinypng.com/

 

If you make your image a png you will get greater reduction in file size and still keep the same quality due to png being lossless.

 

That tinypng site will also optimize jpg images, but since jpg are lossy they can only reduce a jpg so much. But tinypng optimizes png files more and keeps it looking good.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×