Jump to content


Changing CSS values using greenock

Recommended Posts

HI Greensock community.

I am creating a banner and I need to be able to change the background colour of a <div> while the ad is playing.

I have tried the following code but this breaks the banner and it does not play.


.to($DMPU_container, .5, {css: {background-color:"#EBBB2C"} }, "swop")


Am i getting the syntax wrong, and if so what is the solution?



Link to comment
Share on other sites

Hey Neil and welcome. A couple questions for you.

  1. Are you using TimelineLite (or perhaps TweenLite)? They are the only things that need the css: { } inside of the vars object.
    • If that is what you are using, have you loaded the CSSPlugin?
    • If that is not what you're using (you're using TimelineMax/TweenMax), you should move it outside of the css: { } like so: .to($DMPU_container, .5, {background-color:"#EBBB2C"}, "swop")
  2. Are you using a timeline? That's the only case where a label like "swop" makes sense.

Besides that, we would probably need to see a minimal demo of your issue presented in something like a CodePen to help debug exactly what's going on. See the below thread on more information on how to do that.




  • Like 1
Link to comment
Share on other sites

Except that, try to change "background-color" to backgroundColor, as these props should be camel cased. 

  • Like 2
Link to comment
Share on other sites

Yep, @Wipeo is correct - all CSS properties should always be camelCased. It's invalid JS to have a dash in there (JavaScript thinks you're trying to subtract from a variable). 

  • Like 1
Link to comment
Share on other sites

Thanks to all for your advice and suggestions.

I shall give them a try....



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.