7

I have been wondering what's better for animation in terms of performance - Javascript or CSS3. On this page you have a comparision between GSAP, jQuery and CSS3:

http://css-tricks.com/myth-busting-css-animations-vs-javascript/

Scroll down to performance comparision. Now my Question is the following:

Will CSS3 sooner or later be faster than Javascript(GSAP in this case)? So should we program animations with CSS3 or still with Javascript?

Update: Another website:

http://greensock.com/transitions/

As it looks right now, GSAP is faster than CSS3 in most ways, but in 3D transforms CSS3 is faster.

The question now still is: Will CSS3 be faster than GSAP(or other comparable frameworks)?

Improve this question
4
  • obviously the speed of CSS is always faster than js, 'cause CSS is a browser built-in library, but if you want cross-browser support, then js is the way to go Commented Sep 24, 2014 at 7:19
  • Look into the page I posted. He tested GSAP vs CSS3 and at this point it was up to 3 times faster than CSS3. Commented Sep 24, 2014 at 7:34
  • I didn't know what GSAP was until now, sounds amazing!! <3 Commented Sep 24, 2014 at 7:50
  • I dare you visually see any difference. Commented Sep 24, 2014 at 14:07

3 Answers 3

Reset to default
5

CSS3 animations are faster and smoother than JavaScript animations because they can be optimised and potentially hardware accelerated by the browser/GPU. JS animations on the other hand are usually a little less smooth because each frame of the animation has to be explicitly interpreted an rendered.

Also, JS animations are used mainly for older browsers which don't support CSS3, which is relatively new.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

This is a much more clear, technical answer. Thanks!
Can you look into the page I posted? He tested it and at this moment GSAP animations are up to 3times faster than CSS3 animations. Or do you have a source for your statement?
The fact that CSS3 is declarative and JS is imperative means by definition it should be faster and smoother. With CSS3 the browser knows all the frames from start to finish up-front, with JS, the frames have to largely be instructed. If you search "CSS3" and "hardware accelerated" there are man articles. In order to know how GSAP have created smoother animations in JS it would require a detailed analysis. If anything the JS animations' frame rate should at least equals CSS3, especially with the recent performance busting optimisations of major JS engines.
I hope you understand that this doesnt quite answer my question. Please read the update in my post
Sure, hopefully a GSAP expert will be able to clarify as I'm interested too.
|
4

Here's an approximation of how animations work:

  • CSS3: "Please transition this as smoothly as reasonably possible."

  • JavaScript (naive): "Okay, so first you move here, then you move here, then here... are you keeping up?" [Browser:] "MAKE UP YOUR MIND!"

  • JavaScript (delta timing): "Okay, move here. Damn, you're slow. Okay, move over here so it looks like you're not lagging."

  • jQuery: "I don't care how it's done, just do it. Bye!"

The winner, in my opinion, is CSS3.

Improve this answer

3 Comments

That being said, when you need to animate something that is rendered to a canvas (WebGL) you will probably resort to javascript/delta timing.
@DatProgram Very true. It is second-best in this list I wrote. Since you can't use CSS on canvas elements, it becomes first.
Don't be fooled that CSS3 animations are an entirely different algorithm. They do have the advantage of native code and potentially being free from the single-threadedness of the JS engine, but they very well may use the same type of frame calculation logic (which there's nothing wrong with). The real challenge for JS-based animations is simply that they have to share timing and execution with everything else going on in javascript (because of single threading) so they are not always able to execute when they want to.
2

It seems that there are only four css properties that get real hardware acceleration as Paul Lewis and Paul Irish explain here: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ (very interesting read!). Those are: position, scale, rotation and opacity All other css properties get nothing in most browsers and might therefore be slow.

So yes, some CSS animations are already super smooth and the rest will get faster in time. Especially on mobile devices. (More technical stuff in the other answers)

But soon after that happens, libraries like GSAP and jQuery will (under the hood) change their animation method anyway. They could even choose the method that is faster depending on the device the site is running on.

(For example: You can already use the transit plugin for jQuery to use CSS3 animations from jQuery. http://ricostacruz.com/jquery.transit/)

So:

Will CSS3 be faster than Javascript?

Yes. But:

Should we program animations with CSS3 or still with Javascript?

That is a diffent story and depend on your needs.

If you animate a little hover effect using opacity: The CSS3 is probalby your way to go. Easy, clean, fast.

For complex animations, different interactions, etc. you will need to use JS which also gives you the flexibility of choosing the animation method later on. Especially GSAP is ridiculous powerful and easy to write.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.