jQuery animations seem to have better browser support, but the CSS3 Keyframes appear to be really fast and smooth yet not very good browser support.
I'd like to here people's opinion about jQuery or CSS3 in terms of:
Canvas Gaming:
I have seen a few CSS3 games which where pretty nice. Then again, when we are gaming with the Canvas we are already using Javascript and to do some quick and dirty stuff we might also include the jQuery Javacsript Library.
Or would we use both for Canvas Gaming? Not sure.
Websites:
For normal websites delivering content, not gaming: what would be a decent approach for animations on a regular Web Page?
I also hear stuff such as: CSS3 Animations slows down some jQuery Animations and other scripts on the page...hm.
To clear things up, I would just someone to explain some of the advantages of using CSS3 Animations or a jQuery Animation.
Any opinions would be nice, thanks!
The Mozilla developer documentation raises some interesting points regarding CSS3 animation:
Letting the browser control the animation sequence lets the browser
optimize performance and efficiency by, for example, reducing the
update frequency of animations running in tabs that aren't currently
visible.
WebKit also makes use of hardware accelerated compositing, which can have a much greater effect on performance than anything Javascript can do at this time. (I think this will change very soon though as more functions are added to manage calculations) This is because it will take advantage of dedicated hardware if it available to perform the calculations, rather than making it happen through a translated language like Javascript.
It stands to reason browser vendors will only increase their support for this in the name of competition, and because the CSS3 standard is getting closer to completion.
My only concern would be the manageability of the code, although this could easily be managed with a decent translation layer. There are some excellent animation engines available in Javascript, although I haven't used or researched one recently to give an accurate estimate of performance.
For the part of your question Re: "Websites: For normal websites delivering content", you are going to want to interact with a server for some of that content. That interaction is going to be via ajax and, based on your question, jquery-based. Then consider some of your animations will be based on the exact data returned.
jQuery makes that kind of content-dependent animation so easy. In a "normal website delivering content" you would, logically, have much less animation than in a game - so performance / resource hogging is less of an issue.
Related
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)?
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.
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.
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.
I'm working on an iPad HTML5 app and I've already implemented ontouch support to trigger events faster and I'm using jQuery to target the elements easier, but for the animations I'm using CSS3 transitions
What do you think is faster? using jQuery animations since I already have imported the library or use CSS3 transitions when targeting elements with jQuery?
According to this link, jQuery animation is much slower then css animation.
Reason can be because jquery has to modify the props of the DOM element using timers and a loop. The CSS is part of the browser engine . which depends pretty much on hardware of system. You can also check that in profiling of Chrome or Firefox.
CSS animations will almost always be faster.
A head to head comparison of CSS transitions and jQuery's animate.
Rather than setting a timer to run repeatedly, transitions are handled
natively by the browser. In my rather unscientific testing,
transitions are always quicker, running with a higher frame rate,
especially with high numbers of elements. They also have the advantage
that colours can be animated easily, rather than having to rely on
plugins.
http://css.dzone.com/articles/css3-transitions-vs-jquery
Related Question:
Performance of CSS Transitions vs. JS animation packages
CSS3 Transitions should be faster because they are native to the browser.
Its css3 its faster and consumes lesser memory and is smoother.
CSS processor is written in C++ and native code executes very fast whereas jQuery (JavaScript) is an interpreted language and the browser can't predict JavaScript ahead in time.
http://dev.opera.com/articles/view/css3-vs-jquery-animations/
View the above link to know about the experiments held over CSS3 vs jQuery
This article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) does an excellent comparison of CSS transforms vs. jQuery animations vs. GSAP (another JavaScript library).
CSS animations are significantly faster than jQuery. However, on most devices and browsers I tested, the JavaScript-based GSAP performed even better than CSS animations
So CSS transforms are faster than jQuery animations, but don't let this make you assume that CSS transforms are faster than JavaScript. GSAP shows that JavaScript can outperform CSS.
CSS3 will be faster as it comes standard with the browser where as JQuery is another file that has to be loaded, however I have found that depending on the animation that JQuery can run a lot smoother. Sometimes it's also nice to experiment with pure Javascript now and again.
The Mozilla developer documentation raises some interesting points regarding CSS3 animation:
Letting the browser control the animation sequence lets the browser
optimize performance and efficiency by, for example, reducing the
update frequency of animations running in tabs that aren't currently
visible.
WebKit (which powered Safari) also makes use of hardware accelerated compositing, which can have a much greater effect on performance than anything Javascript can do at this time. (I think this will change very soon though as more functions are added to manage calculations) This is because it will take advantage of dedicated hardware if it available to perform the calculations, rather than making it happen through a translated language like Javascript.
I am not 100% certain whether WebKit on the iPad is hardware accelerated; however it would stand to reason that because it is standardized and increasing in popularity, that this would only improve with time.
From here
A head to head comparison of CSS transitions and jQuery's animate.
Rather than setting a timer to run repeatedly, transitions are handled natively
by the browser.
In my rather unscientific testing, transitions are always quicker, running with a
higher frame rate, especially with high numbers of elements. They also have the
advantage that colours can be animated easily, rather than having to rely on
plugins.
A test here along with this conclusion.
Javascript animations based on timers can never be as quick as native
animations,
as they don't have access to enough of browser to make the same optimisations.
These animations should be used as a fallback only in legacy browsers.
Also notice this,
CSS3 animations are terriffic but do use a lot of your processor’s
power.
There is no way to fine tune the animation with CSS3 the same way you can using a
framework like jQuery. So, as long as CSS3 animations aren’t CPU friendly you
better stick with jQuery.
If you're using jQuery/javascript animation with the canvas tag (which if I'm not mistaken still relies upon a timer... new to playing around with it though), then it gives you the advantage of hardware acceleration with javascript. If you're just looking to move something around when you hover then transitions work great. CSS transitions may run a little smoother but it's a trade off, you're relinquishing a ton of javascript control over the animation by using transitions. I like to keep style in CSS and behavior in JS - isn't that how it's supposed to work anyway? CSS transitions kind of broke that logic...
Native is supposed to be faster, but if browser developers are sloppy (or lazy), they write bad code, which leads to poor results with CSS animations (or transitions).
Nowadays, jQuery has a plugin which overides the "animation" function with an "improved" one. see Velocity. I'm not getting into other ways to animate the DOM with javascript because it's outside the scope of this question.
So, as-is, jQuery is slower than CSS. also, CSS is easier to write because you already have the element style probably, so adding a few rules is easy, compared to a situation where you need to start writing JS somewhere and manage it..but for complex, heavy stuff, JS is faster, sadly.
A very good article about this exact question - http://davidwalsh.name/css-js-animation
I'm wondering is there any difference in performance of using CSS Transitions vs. any of the various JavaScript animation libraries? (script.aculo.us, scripty2, jsAnim, MooTools, $fx, etc).
I've tried various tests in Safari and Chrome but I don't actually see any difference. I thought that CSS Transitions were supposed to be hardware accelerated.
Update:
I've tried using Scriptaculous' Effect.Fade on 5 different DIVs (each containing a canvas with some lines). Doing the exact same thing using CSS transitions, I see absolutely no difference in performance. Both were very smooth with one DIV/Canvas, but both are very slow when I do more than 2 at a time.
I've tried this in Safari 4, 5 (OSX), Google Chrome 5 and FireFox 3.7pre. Same results across the board.
In answer to UpHelix's response, you're not simply limited to hover, etc. You can trigger a transition by changing any transitionable style. For instance, set the opacity of an element in JavaScript (after, you've specified the transitionPropery and transitionDuration for that element).
Yes, there is a difference, CSS is much faster. It may be difficult to see until you get many running at the same time or the more they do. CSS animations are limited though. In most cases they really only work off the :hover event. With JavaScript you can perform animations at any event: click, mouseover, mousemove, mouseout, keyup, keydown, etc.
In my opinion, jQuery is the best for JavaScript animations in 2010. See jQuery Demos
To add to Mechlar's (correct) answer: JavaScript is an interpreted language and the JS engine of the browser has to parse and execute every instruction during run-time (I know there exist JS compilers, like V8 (used in Chrome), but the principle remains the same).
On the other hand, browsers can implement CSS transitions natively, e.g. in C/C++ or something. This code will be compiled to machine language.
If CSS transitions are hardware accelerated or not, depends on the techniques the browser uses, the platform the browser runs on, etc.
You will notice the difference on mobile browsers (iPhone, Android, etc.).
CSS animations have the advantage of being processed by the browser. Fast computations and optimizations are available. In my opinion web animations performance should be looked trough a "holistic" point of view. After all an animation, in terms of FPS, can not be faster then the browser refresh.
The real performance level is given by the overall UI performance. A JS and a CSS animation can look similar. However CSS animations win since they do not block the UI thread.
Stoyan Stefanov wrote and demo how CSS animations are put out of the UI thread:
http://www.phpied.com/css-animations-off-the-ui-thread/
I have an idea for a website which involves a canvas area which has no limit to its size. Basically you would be able to add items to the canvas (notes, photos whatever really). You would then be able to drag the canvas which would move those items along with the canvas until they disappear of screen. If you dragged the canvas back the other way they would appear again.
Question:
Which would be the best suited to this type of thing, Flash or Javacsript?
My main worries are the speed at which javascript/ flash could handle moving multiple items around on screen in the way discribed. Which language would handle better for a user on a slow machine.
UPDATE:
Thanks for your opnions guys, but to clarify what are the benefits of canvas over straight jQuery DOM manipulation? or visa versa. I've never used canvas before.
I don't think this is a question that will get you an objective answer - Flash developers will tell you Flash is better, web developers will say JavaScript. Trying to remain objective, I'd say that both technologies are suitable for what you describe, but have different advantages.
Flash will definitely render faster, even on slow machines, and is much richer graphically.
JavaScript is more accessible and works on a greater number of devices. Use a good JS framework though.
My initial thought would be to go with Javascript - if it's good enough for Google Maps, it's probably good enough for your app too.
Do you need to use canvas, what you're describing could be done with just javascript and the DOM. It would perform perfectly well unless there are a huge number of elements and it would be cross-browser compatible. For canvas you would require exCanvas to support IE which can sometimes slow things down.
The best way would surely be Javascript. And I would even say that you should reconsider the use of canvas. It sounds like it could be done in pure DHTML. In that way you wouldn't lose support for IE.
Consider using one of the javascript frameworks; Prototype or jQuery come to mind. It will ease your coding immensely. Given the development in javascript-engine performance (next versions of Webkit (Squirrelfish Extreme) and Mozilla (TraceMonkey) will be lightning fast) the worries about performance may be moot.
Also if you decide that you can't do it without canvas consider using John Resig's processing.js.
I'd say go with flash (or DOM if you don't need the extra punch). Here's my reasoning:
You can do cool transformations with canvas (skewing, rotations, gradient fade-ins in images, reflection effects, etc) that you can't with DOM. The downside is that doing these cool things is math heavy.
Canvas doesn't work in IE. IE's equivalent (VML) apparently has a root-access security hole.
The DOM has been around for longer than canvas and since it's more widely used (and depended upon), it's more optimized and polished than canvas.
The Flash community has a lot of good free components available that may already do what exactly you want.
Flash and DOM have a lot of good documentation and tutorials, canvas not so much.
Flash can do pretty much everything that the DOM and canvas can, plus audio, video and grabbing input from your web cam.
I understand how JS is run and I think I understand most of the DOM but I've no idea about animation. Does anybody here know of a good guide that can explain to me how it's done in Javascript?
In addition, should I even consider Javascript for animation? Should I instead be looking to learn flash?
Avoid flash, its a horrible requirement, uncrawlable by Google, unsopported by a bunch of browsers and systems (eg iPhone) and most importantly: it forces you to reinvent web standards (e.g. scroll bars and whatnot), Javascript on the other hand is easier to maintain and code for in the noscript case.
try scriptaculous for your animations;
here's a quickie 3-line tutorial so
you can see it working
here's a more complete tutorial
here's the scriptaculous wiki
note that there are a gazillion JS animation libraries, some really good jQuery comes to mind. Usually they're just a script tag and an onclick event to setup.
Good luck!
/mp
if your animation is simple, change colors over time, move from x to y in 3 seconds. Javascript is fine. If you want all kinds of wizbang buttons and coordinated rotation of the screen, straight up js + dhtml will be clunky at best. Silverlight vs Flash are you questions at that point. Interestingly enough, you program Silverlight with javascript, and that would be the major benefit to simply upgrading to a faster and more dynamic DOM that is implemented in Silverlight but still writing the same code. Flash programmability is very limited in my experience, you can do anything, but it will be slow and take thousands of lines of code to get there. For simple JS animations look at jQuery or Scriptaculous.
Check out a JS animation framework like Bernard Sumption's Animator.js. It's pretty light-weight and has some excellent examples.
Personally, I wouldn't be animating things in JS. Flash FTW.
If you aren't concerned with IE support, you could also try experimenting with the canvas element:
MOZILLA DEVELOPER NETWORK Basic animations