clunky animation

[bobdobbs]

My js code:

$(document).ready(function() {

var tl = new TimelineLite() ;
    
$("#run").click(function() {
    tl.to( $(".box"), 2, { left: 10 } ) ;
    console.debug( "done" );
})
  
});

live:

See the Pen xCpiy by anon (@anon) on CodePen

 

The purpose of this code was to just play with greensock. I pretty much just copied the code from the top of the page here: http://api.greensock.com/js/

 

An animation occours. However, I expect the box to move smoothly from it's current position to the final position given in the script.

 

In firefox, the element just jumps, without any gradual animation. In chrome, the element first jumps half-way through, and then animates.

 

I get exactly the same clunkiness with timelinemax as well. I don't get it as much with tweenmax.

 

I'm running this in the same browser that I'm running the demo's from greensocks site. The demo's run smoothly, but my simple test animation is too clunky to do anything with.

 

What's going on here? What do I have to do to get smooth animations?

[GreenSock]

This isn't an issue of "clunkiness" or non-smooth animations - I think it's just a misunderstanding of how timelines work. 

 

All tweens and timelines start playing immediately by default (you can pause() them, of course, or set paused:true in your vars parameter). You were creating a timeline BEFORE any clicks, and it had nothing in it, so it basically finished right away (on the very next "tick" of the engine). Then, later (when the click occurred), you were dropping a tween into the (already expired) timeline. The virtual playhead had already shot way past that point where you schedule the tween to play, thus it shot to the end. My guess is that you just happened to wait longer to click when you were in Firefox. 

 

There are two pretty easy solutions:

 

OPTION 1:

Create your timeline immediately before you populate it. 

$("#run").click(function() {
    var tl = new TimelineLite();
    tl.to( $(".box"), 2, { left: 10 } );
});

Note: this particular example is a little weird because there's no reason to be using a timeline - it's simpler/cleaner to just do a regular tween. Timelines are for when you're trying to group/sequence multiple tweens and control them as a group. There's nothing "wrong" with creating a timeline here - just unnecessary and a little "clunky"

 

Doing a regular tween would look like:

$("#run").click(function() {
    TweenLite.to(".box", 2, { left: 10 });
});

OPTION 2:

You could create your TimelineLite outside the click() function, but just make sure you tell the playhead to play from the beginning of the timeline rather than having it synced with the global time, like:

var tl = new TimelineLite();
$("#run").click(function() {
    tl.to( $(".box"), 2, { left: 10 } );
    tl.play(0);
});

(you could also chain those calls, like tl.to(...).play(0))

 

Does that clear things up for you?