Jump to content

Sloan Thrasher

In the Vars object of from/to is there a list of HTML properties?

Go to solution Solved by PointC,

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

Sorry in advance for the newbie question.


When constructing the Vars for the from, to, or fromTo methods, you have to specify the css property to change. Is there a list?


I'm having trouble figuring out what to use for hyphenated properties like font-size, font-weight, etc. Also, I just happened to stumble across an example that used alpha (I was looking for opacity) and found that one.


Is there a scale property to "zoom" an element in the animation?



Link to comment
Share on other sites

  • Solution

Hi Sloan Thrasher  :)


Welcome to the GreenSock forums.


That's a good question. camelCase should be used for all the hyphenated properties. You just drop the hyphen and make the first letter of the second word uppercase. So font-size becomes fontSize, background-color becomes backgroundColor etc. GSAP can animate any numeric property and can set non-animatable properties.


Sounds like you found autoAlpha. That is a combination of opacity and visibility. When you use autoAlpha and you set it to 0, the element is automatically set to visibility:hidden. Handy for many situations, but you can use opacity if you like. 


scale is just scale if you want uniform scaling or you can use scaleX or scaleY as well.


You'll find a lot of great information in the docs for the CSSPlugin




Hopefully that helps a little bit.


Happy tweening and welcome aboard.


  • Like 3
Link to comment
Share on other sites

Yep, PointC is exactly right. And I wanted to point out that there is no pre-defined list of properties that you're "allowed" to animate with GSAP. It can animate almost any property of any object. For example: 

var obj = {mySillyProperty:20};
TweenLite.to(obj, 2, {mySillyProperty:100, onUpdate:function() {

That'll animate obj.mySillyProperty from 20 to 100 over the course of 2 seconds and log the values on each tick. 


My point is that it's super flexible and it's not limited to some list of properties. Most CSS properties just work. Give 'em a shot. :) And we created a few "special" ones for special cases, like rotation, scaleX, scaleY, x, y, autoAlpha, etc. just to address specific needs (like independent control of transform components). 


Happy tweening!

  • Like 2
Link to comment
Share on other sites

Thanks PointC and GreenSock!!


Thanks for the link PointC, that proved very useful. While I think the docs are some of the best I've seen, the one suggestion I'd make to help out us Newbies, would be to have a link to that article in the from, fromTo and To (and others I'm sure) to the article about the vars.


I've learned a lot in a short time through the forum posts and examples. It would be nice to have a link to GreenSock demo examples under the examples menu though.


All in all, GSAP is one of the most awesome libraries I've seen. There are some good ones that are lacking documentation and support -- GDAP certainly doesn't fall into that group!!

  • 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.