I just changed the animation engine for one of the websites I'm currently working on from Jquery Transit to Velocity.js. I simply changed transition() to velocity() and while it is working, the animations rendered by Velocity.js perform much worse (than Transit's). With Transit I get almost perfect 60fps and correct timing, while Velocity gives me less than 10 fps and the animation speed seems to be incorrect. Velocity's animations give an impression of being heavy and sluggish in comparison to Transit, but in theory Velocity should perform better.
Does anybody have an idea what the problem could be? Could it be that it conflicts with slick.js (carousel), which is also present on that site?
Here's an excerpt of the syntax I use, nothing out of the ordinary, I think.
$contactOverlay.velocity({ height: '100%' }, 300);
Thanks for all your help.
Velocity.js doesn't perform well if it's used together with other Animation-Libraries, like jQuery's animations (especially when they are active at the same time). Make sure Velocity.js is the only thing that is animating elements on your page.
In my experience, pure CSS-Animations shouldn't be a problem, though.
Related
There's a speed test in greensock website comparing speed with other animations libraries, JQuery or Even CSS Transitions. It's benchmarking FPS by animating hundreds/thousands of perticles.
The FPS of greensock animations outnumbered everything else. Css transitions & JQuery is not much close to greensock.
I tried searching about greensock but couldn't find much useful information. Most of them aren't explained well.
I'm still a amateur in javascript. If I try to make my own JS animations, those won't be as fast as gsap. Not even close. So it would be great to know what happens underneath the hood. How they optimize that much!
Jack (the creator of GreenSock) tells how GSAP is so fast in this forum post among other places. To recap some of the points there:
Use highly optimized JavaScript across the board (this entails many things like using linked lists, local variables, quick lookup tables, inlining code, bitwise operators, leveraging prototypes instead of recreating functions/variables for each instance, etc.)
Engineer the structure of the platform so that it lends itself very well to high-pressure situations, minimizing function calls and making sure things are gc-friendly.
Make updates in a single update loop that's driven by requestAnimationFrame, only falling back to setTimeout() if necessary.
Cache some important values internally for faster updates.
For CSS transforms, we calculate matrix values and construct either a matrix() or matrix3d() when there's any rotation or skewing because our tests showed that it was faster.
There's no silver bullet that makes it fast. It just is smart in the way that it does things based on over a dozen years of experience.
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 encounter with a question what the cons and pros of using jquery.animate() and GreenSock TweenMax animating engines. So maybe there is any one who knows it. There is not enough information on the web, also what about the performance.
I tried to use both, jquery.animate() and tweenMax, but in some cases i prefer to use jQuery engine, in other GreenSock.
I'm trying to decide which is better, and not to jump from one to other.
Thanks in future, it's realy interesting to know which to use.
Engines:
http://jquery.com
https://www.greensock.com/gsap-js/
jQuery's fadeIn() and fadeOut() methods are quite convenient. However, if you are going for something more expressive, I would suggest you to use GSAP (GreenSock Animation Platform). jQuery animations are generally bit slow and TweenLite is significantly faster (20 times) than jQuery animation according to GreenSock.
In addition you will be getting really handy functions for animations such as reverse, bezier curve, timeshift, pause & skew etc and better hardware acceleration support on mobile devices.
Personally, I think GSAP is better but a tiny handy selector engine would have been cool.
Here is very good comparison between two.
UPDATE
HTML5 Animation Speed Test
I'm working on a website that uses a lot of large images and a lot of javascript.
Check it out here – http://joehamilton.info/1/1/
I've been trying to improve the performance and have had little success. I would just like to keep the frame rate smooth because sometimes it gets bogged down.
I thought it might have been code that was bogging it down but after discovering profiling in chrome it seems to the "paint" process that is slowing things down.
I'm just wondering what I could do to improve things. I'm open for any suggestions but I guess I was thinking along the lines of these things types of things:
• Will compressing the image files help?
• Would a 300px square repeating pattern image be faster to paint in a 900px square div than a 900px square image..
It's a large and complex site so I would rather not spend ages modifying things if it's not going to help.
Any expert raster image people out there?
For anything moving around you should use transitions and transforms rather than jquery animate and background-position as it will then be hardware accelerated in some browsers. It also avoids repainting so regularly. http://css3.bradshawenterprises.com/demos/speed.php is an example comparing the two techniques in an admittedly extreme case.
If you can't do that, ensure your animation uses requestAnimationFrame rather than a setTimeout loop.
That should help a lot.
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.