Is somewhere a list of all css properties that can be used with GSAP?

[cormack 4 Likes (Newbie)]

Hi,

 

Just wondering if there is somewhere a list of the css properties that can work with GSAP?

 

Thanks in advance.

 

 

[PointC 8,599 Likes (Superhero)]

Hi cormack   ,

 

GSAP can animate most CSS properties.

 

Complete reading is here in the docs: http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

[Shaun Gorneau 1,503 Likes (Superhero)]

Any CSS property that accepts numerical values.

[Diaco 1,948 Likes (Superhero)]

Hi cormack 

 

in addition to [ PointC , Shaun Gorneau ]'s answer :

 

GSAP can animate almost any css-related property , pls check the CSSPlugin Doc. , there's some points :

 

1 - you should to enter property name as camelCase .

 

2 - for css pseudo elements you should to use CSSRulePlugin

 

3 - some of property isn't tweenable and will set at the beginning/end of tween , like : display , float , borderStyle , position... etc

TweenLite.to(".box",1,{borderRadius:10 , display:'none'}); // display will set at the end

TweenLite.to(".box",1,{borderRadius:10 , position:'absolute'}); // position will set at the beginning

[Jonathan 5,176 Likes (Superhero)]

In addition to the above answers,

 

Here is a list of CSS properties that are animatable:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

 

But just because a CSS property is not in the list or is shown to be non-animatable.. does not mean GSAP can not animate it.

 

GSAP can animate any object or property! As long as that property is not a string value.

 

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

Not that I'd like to mess with Shaun, Diaco and Jonathan. But just keep in mind that beyond which properties can and can't be animated Jack has always stated that the CSS Plugin and every other plugin work only with properties that are currently part of the W3C spec and not experimental properties that can be animated. The reason for is that at some point those experimental properties can be dropped in favour of another or simply removed. This could mean that all that part of the plugins would have to be removed or re-factored which can be quite a nightmare and cause legacy support issues.

 

I would recommend you to check and bookmark the link provided by Jonathan in order to see which properties are part of the official spec and try to work with those.