Nothing happens using TweenLite

[Madster]

Hi guys,

 

I have an animation in Jquery, which I want to "recreate" in GSAP.

 

Jquery:

$(document).ready(function(){
   $('#newsContainer').animate({
  height: '+=400'
   }, 2000, function() {
  // Animation complete.
   });
});

 

 

GSAP:

$(document).ready(function(){
   var newsContainer = document.getElementById("newsContainer");
   TweenLite.to( newsContainer, 2, {css:{height:"800px"}});
});

 

The animation works perfect in Jquery, but nothing happens using GSAP - no errors, no nothing.

 

Any suggestions?

[GreenSock]

A few questions:

1. Did you load TweenLite or TweenMax?
   
2. Does the "newsContainer" start at 400px in height? It looks like you're doing a relative tween in jQuery, but an absolute on in TweenLite - why? You can do "+=400" in TweenLite too.
   
3. Can you please post a very simple HTML page that demonstrates the issue so that we can see it in context for ourselves? I wonder if there's something else going on in your JS or HTML that's causing the issue.
   

[Madster]

1. I load TweenLite.js (non minified)
   
2. Sorry for that, I had been trying all kinds of options to get it to work, but it also fails if using +=400
   
3. I had tried to implement it on a pretty complicated page, but even after reducing it the problem persists. Test can be found here: http://semor.dk/temp/feed/greensock_test.html
   

[GreenSock]

Oh! You forgot to load the CSSPlugin Remember, TweenLite isn't just for tweening DOM elements - it can tween any JavaScript object. The CSSPlugin needs to be loaded in order for TweenLite to tween css properties of DOM elements. Have you checked out the "getting started" guide at http://www.greensock.com/get-started-js/? That has instructions about loading CSSPlugin and what it can do.

[Madster]

Doh!

 

It probably happened because I initially was trying to change the height without the css.

Would be nice if it threw an error like "CSS plugin missing" or something instead of just failing silently though.

 

Thanks a lot for the help