Jump to content


Bug in GSAP or doc.

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



Take a look at this:




If I don't wrap "left" and "top" in the "css" object, GSAP will think I am trying to tween my object's left and top (non-DOM!) properties.


The docs for TweenLite/TweenMax need to give out a warning for such cases, or possibly this is a bug with the library.

Link to comment
Share on other sites

That's not a bug at all - it's very much by design. Remember, GSAP can tween any numeric property of any object, so if you do have a "left" property defined directly on your element, AND there's also a "left" css property, how is it supposed to know which one you're attempting to animate? This is one of those very rare scenarios when you need to specify a css:{} object so that there's no ambiguity. Originally, you had to always declare one, but as a convenience (since it was soooo common for people to animate css properties), GSAP automated the creation of that css:{} internally when certain conditions are met. Unfortunately, when there's an ambiguity like in your [very rare] scenario, it can't read the developer's mind and know their intent, so the extra clarification is necessary. 


I've added a slight clarification to the CSSPlugin docs to make it more obvious. Thanks for pointing out the need for that. 

  • Like 3
Link to comment
Share on other sites

This behaviour is defined in the docs for CSSPlugin here: http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/


The information in question:


TweenLite and TweenMax (as of version 1.8.0) automatically check to see if the target is a DOM element and if so, it creates that css object for you and shifts any properties that aren't defined directly on the element or reserved (like onComplete, ease, delay, etc. or plugin keywords like scrollTo, raphael, easel, etc.) into that css object when the tween renders for the first time.



(am I referring to this newly added information?...)

Edited by jamiejefferson
  • Like 1
Link to comment
Share on other sites

When I look at the docs, the most obvious page is http://greensock.com/docs/#/HTML5/GSAP/TweenMax/ or TweenLite -- not the CSSPlugin page. The TweenMax minified file does have the CSSPlugin code, so it would be helpful to note this potential issue on the TweenMax page, next to the examples.

Link to comment
Share on other sites

On that TweenMax page you referenced .. it has the following displayed when you click the SHOW MORE link button:


Normally, css-specific properties would need to be wrapped in their own object and passed in like TweenMax.to(element, 1, {css:{left:"100px", top:"50px"}}); so that the engine knows that those properties belong to the CSSPlugin, but because animating DOM elements in the browser with CSSPlugin is so common, TweenMax automatically checks to see if the target is a DOM element and if it is (and you haven't defined a "css" object in the vars), TweenMax creates that css object for you and shifts any properties that aren't reserved (like onComplete, ease, delay, etc. or plugins) into that css object when the tween renders for the first time. There is a slight performance penalty (virtually impossible to notice unless you're tweening a LOT of elements simultaneously), but in most cases the convenience is well worth it.


So that TweenMax Docs page does explain about the CSSPLugin css object, right below one of the TweenMax examples.



Link to comment
Share on other sites

I see. Well that does not say what it does with the non-CSS elements, is placed way below the first example, and is wayyyyyyyyyyy too long.

Here is what I would write.. or something like this:


NOTE: TweenMax [or whatever it should be called...] will also tween non-CSS properties and DOM attributes. If a namespace conflict exists, TweenMax will tween the non-CSS property. To tell TweenMax to tween a CSS-specific property, enclose your CSS property list in a css property; e.g.: "css: {left: 50px}".



Even if it's rare to do this (a question mark on that..), it's extremely frustrating when your tween doesn't seem to work for no reason!

Link to comment
Share on other sites

I think Jack has just made the update mentioned above to the CSSPlugin docs, and forgot that the same message was in the TweenLite and TweenMax docs (and the site's TweenLite/TweenMax pages) too. I'm sure he'll update those too once he notices.

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.