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. /

If anyone has any ideas, I would appreciate it!

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/mBPug/

If anyone has any ideas, I would appreciate it!

• javascript
• html
• css
• gsap

• It might help if you made a jsfiddle that demonstrates the issue you are having. – J. Holmes Commented Dec 5, 2013 at 22:09
• Good call. I just updated my post. – dygfloyd Commented Dec 5, 2013 at 22:17

1 Answer 1

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/mBPug/4/