Full list of tweenable properties

[IHeartGsap]

Hi! 

FIrst off let me just say that I've been using Greensock animation library for years and don't know where I would be without it <3   With that out of the way, I'd like to ask if anyone know where I can find a full list of tweenable properties.

 

Example.

 

backgroundColor

scale

left

right 

ect.

 

I dug around for sometime to not much avail.  Any help?

 

Thanks in advance!

 

Rob 

[Jonathan]

Hello IHeartGsap, Welcome to the GreenSock Forums.

 

Here is a list of animatable CSS properties :

 

https://developer.mo...ated_properties

 

Here is another list of CSS properties that are animatable:

 

http://oli.jp/2010/css-animatable-properties/

 

Keep in mind that GSAP can animate any object property, and even some CSS properties not in the list. Also that this list can change depending on if the specs change, and browser features are updated.

 

Best to just use the above lists as a guideline, and test, test, test away!

[IHeartGsap]

I know all the css properties, but I still would like an actual list as to what is usable with tweenlite.  For example, transform-origin is transformOrigin in gsap.  Only way I knew that was that they showed it in an example in one of the demos.   Is there really no list of the actual property names or any other way to look this up?

 

 

Thanks again!

[Jonathan]

No worries, There is no physical list that i know of...  GSAP can animate any object and CSS property!

 

CSS is a hyphen-delimited syntax. So it's just standard practice in JavaScript to use camelCase due to the hypen symbol being an illegal character for variables and key names in JS.

 

Below Taken from CSSPlugin Docs: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

Note: a common mistake is to forget to use camel case representations of the properties, so instead of "font-size", you'd use "fontSize". "background-color" would be "backgroundColor".

 

Just make sure all your CSS properties are camelCase, removing all hyphen symbols, and you will be fine!

[Rodrigo]

Hi,

 

The most accurate way of knowing which properties can be tweened with GSAP is by checking the W3C information regarding the approved standards, that's pretty much the rule of thumb. The reason is that Jack never includes any property that is in an experimental stage, because that could later change, meaning that the code (mainly the CSS Plugin) could need important changes. Another factor to consider is browser support, if just one browser supports a specific proprety that means add code for just one browser, increasing file size for the rest of the browsers that don't use it. Also with time that property could be dropped from development by either the browser vendor or the W3C, in that case you end up with a lot of useless code in the Plugin and the code needs to be re-accommodated in order to exclude that particular property.

 

Finally to give you a direct answer, no, unfortunately nobody has embarked in the task of creating a list of the properties that work with the CSS Plugin

 

Anyway, if it helps in this post from Stackoverflow you can find a lot of indexes from the W3C regarding many CSS properies:

 

http://stackoverflow.com/questions/6187085/full-css-property-table

 

Rodrigo.

[IHeartGsap]

No worries, There is no physical list that i know of...  GSAP can animate any object and CSS property!

 

CSS is a hyphen-delimited syntax. So it's just standard practice in JavaScript to use camelCase due to the hypen symbol being an illegal character for variables and key names in JS.

 

Below Taken from CSSPlugin Docs: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

 

Just make sure all your CSS properties are camelCase, removing all hyphen symbols, and you will be fine!

Ah Ok, awesome!  I guess I should've seen that.  Thanks for spelling it out for me