Jump to content

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

className does not seem to override css properties applied to element using ID

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

The className plugin will not overwrite any properties that have been set using the ID selector in CSS.


This works:


See the Pen iAqom by x0b (@x0b) on CodePen


This doesn't:


See the Pen hKDie by x0b (@x0b) on CodePen


Is this the correct behaviour?



Link to comment
Share on other sites



I haven't looked with detail the code of the className var and how it works but if you create a local sample and use dev tools or firebug you'll see that there are changes in the element's inline style, but when the tween is completed they are removed, here's what I think is going on, the engine detects the className property in the instance's vars, then it looks for that style in the document's style declaration, get the style's values and does what always does in order to animate between the current values and the final ones. When the tween ins completed, since the change was made with className the engine applies a clearProps to all the properties that were animated, therefore it seems like the styles were replaced instead of overwritten.


Of course Carl or Jack could give us a more detailed explanation.


Also I don't see any  difference between your codepens, the code is the same so there's no difference in the behaviour of both samples, and keep in mind that is rather difficult to use dev tools or firebug on codepen.




  • Like 1
Link to comment
Share on other sites

Yep, I believe Rodrigo is correct, but I'd like to see the different codepens to verify - could you post distinct ones? Both of the codepens you posted were identical. 

Link to comment
Share on other sites

Hi, sorry I forgot to save the codepen, they should be different now!

Link to comment
Share on other sites

Ahh yes. You can't put a class over an ID, classes are more specific than IDs.


This is just a specification rule and has nothing to do with GSAP. The only way is to change the element's inline style, just what GSAP does, but that means doing it through the usual way via the constructor:

TweenLite.to("#start", 1, {width:100, height:100, backgroundColor:green});

The only way I know is adding !important in the stylesheet, but that will render the new style immediately, so you won't get the gradual change.


Another chance is to work with classes and use the ID just for selecting purposes.




Link to comment
Share on other sites

  • 2 weeks later...

Thanks a lot, that clears things up. 

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.