Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
neilb1969

Changing CSS values using greenock

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 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?

 

thanks

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
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 2

Share this post


Link to post
Share on other sites

Thanks to all for your advice and suggestions.

I shall give them a try....

 

 

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×