Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TweenLite does not animate

I am trying to do a simple animation of top-margin using GreenSocks TweenLite for Javascript. I've used the library many times but, for some reason, it's not working this time. Note: The "onComplete" is firing but, no matter what element I use, I cannot animate any CSS properties on HTML elements.

HTML

<div id="GS_PipelineHeadline h2"></div>

JAVASCRIPT

TweenLite.to("#GS_PipelineHeadline h2", 0.5, 
{ 
    "margin-top": 0, 
    ease: "Back.easeOut", 
    onComplete: function () 
    { 
        console.log("Crap"); 
    } 
});

Here is a real quick JSFiddle I created that includes all the CSS, JS and HTML. http://jsfiddle.net/mBPug/

If anyone has any ideas, I would appreciate it!

like image 333
dygfloyd Avatar asked Dec 05 '13 22:12

dygfloyd


1 Answers

A few things:

  • add the CSS plugin to your fiddle
  • "margin-top" wasn't going to do much, use top instead

.

TweenLite.to("#GS_PipelineHeadline", 0.5, {
    top: 0,
    ease: Back.easeOut,
    onComplete: function () {
        console.log("Crap");
    }
});

http://jsfiddle.net/mBPug/4/

like image 158
Tim Vermaelen Avatar answered Oct 16 '22 07:10

Tim Vermaelen