Jump to content
Search Community

clunky animation

bobdobbs test
Moderator Tag

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

My js code:

$(document).ready(function() {

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


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?

Link to comment
Share on other sites

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:



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 });


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 } );

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


Does that clear things up for you?

  • Like 3
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.
  • Create New...