Jump to content
GreenSock

cormack

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

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

Hi,

 

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

 

Thanks in advance.

 

 

Link to comment
Share on other sites

Any CSS property that accepts numerical values.

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

In addition to the above answers, :blink:

 

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.

 

:)

  • Like 2
Link to comment
Share on other sites

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.

  • Like 3
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.
×