Jump to content

Joe Hakooz

Set className vs. jQuery addClass

Moderator Tag

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

Quick question and sorry if it's been answered...


If I simply want to add/remove a class name to an element, would performance be better using:


Or jQuery's



I regularly use both libraries so I'd like to start using the more optimized for this common task.



PS, wrote this on iPad so didn't have access to the WYSIWYG code tool

Link to comment
Share on other sites

Hello Joe Hakooz,


Jack or Carl would be the best to answer that..


Jack optimizes GSAP, and it is a very performance driven animation platform. 


In this jsperf test you can see that native javascript is faster than the jQuery addClass() ...




I would think that set() className would be faster..


This is taken from the CSSPlugin Docs:


Note: there are some css-related properties that don't tween like IE filters, but almost every css property is recognized and animates great. Also, there is a slight speed penalty when using className because the engine needs to loop through all of the css properties to see which ones are different.


But even though their might be a speed penalty.. I would think that Jacks looping of the classNames should be faster than JQuery .. try testing and see ...


But like I said Jack and Carl would be the best person to answer that.. good question! :)

Link to comment
Share on other sites

This is a little tricky because optimizing a tweening engine (something that makes changes many times per second) is very different than optimizing for a one-time interaction like a jQuery.css() or TweenLite.set() call, and there are also tradeoffs with file size. I have opted to make GSAP as performant as possible for animation and also keep file size relatively low, so doing one-time operations like set() aren't quite as optimized as they'd otherwise be if I didn't care about file size or animation performance. 


I don't really know which one is faster (jQuery.css() or TweenLite.set()), but I highly doubt that it actually matters since you'd probably never be able to notice a difference in real-world scenarios. You can definitely notice a difference in animation performance, though. GSAP is orders of magnitude faster.


So in my opinion, when it comes to one-time set calls, just use whichever is more comfortable for you. 

Link to comment
Share on other sites

Jonathan, I was thinking the same thing because GSAP is insanely optimized. It has become attractive as a jQuery replacement in some situations. 


Actually... if GSAP added some optimized DOM selectors, getters and setters, I don't think I'd need jQuery at all... but I understand why you avoid that for file size reasons. Maybe a GSAP selector plugin will show up one day ;-)


Thanks for the info guys!

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