Nice! One of the biggest issues I have with jQuery is the fact that animations are just JS and not CSS with JS fallbacks. I suppose that's a deliberate design choice, but still.
Lazy, sure, but not always a worse experience for the end user.
Testing w/ Modernizr _will_ use client resources, and sometimes it's faster, cheaper, and less costly to make assumptions than run those tests.
Terrible case in point: "position:fixed". It's not supported in older iOS and IE6, and CSS fallbacks don't work. Testing for it w/ JS is too costly to be worth it, so UA checking is a better compromise. (That is, if it's mandatory to degrade well...)
instead of changing CSS properties 'manually' over a period of time to achieve animation it sets the CSS3 transition properties making the browser do the work instead of javascript which in most cases translates into using the GPU leading into smoother, faster and less power hungry animation.
it also seems to add a few things that .animate cannot do, such as skew and 3d rotation.
keep in mind that .animate works in all browsers while this needs a modern browser that supports CSS3.
it enhances jquery's own animate function making animations use CSS3 hardware accelerated equivalents in browsers that support them while using the original jquery software mode when not supported. and you don't need to change a single line of code on your site since its completely transparent.
I tried using it and it didn't seem to work, at least not for using higher-level jQuery animation methods. Using slideDown(), for example, didn't appear to use CSS3 animations.
Love the demo - but I think you should take a moment on there to explain the benefits of using this vs. just setting CSS transitions in a stylesheet - as in, what it's for, why it's better than .animate(), etc.
As a jquery.transmit user I'd say that that the major advantage of js vs plain css3 is in terms of lines of code, especially wrt to browser prefixes. Then I really like to have the timing of animation explicit in js code near the usual .animate(), fadeIn(), setTimeout(), etc... instead of having to check two places.
I think something like Hype is really good for complex animations and content, but if I just want an easy way to scale some stuff and do simple animations on a site, I can use free and convenient libraries like this.
I've made, some month ago, a plug-in to animate collection of elements. Check this out https://github.com/molokoloco/jQuery.boxFx It's like a DOM particules emitter factory.
Great page for this project, I really like the format of your examples. It's also a convenient way to play around with transformations without worrying about adding CSS classes and such myself.
It looks like this library, like gfx and move.js, will accept a cubic-bezier string for easing. I wrote a module which wraps all of Robert Penner's easing equations into cubic-beziers for ease of use:
27 comments
[ 3.1 ms ] story [ 73.7 ms ] threadUgh.
Flagging a browser because "something doesn't work" is just lazy.
Testing w/ Modernizr _will_ use client resources, and sometimes it's faster, cheaper, and less costly to make assumptions than run those tests.
Terrible case in point: "position:fixed". It's not supported in older iOS and IE6, and CSS fallbacks don't work. Testing for it w/ JS is too costly to be worth it, so UA checking is a better compromise. (That is, if it's mandatory to degrade well...)
[IE6] http://www.cssplay.co.uk/layouts/fixed.html
(Not that it matters anymore.)
it also seems to add a few things that .animate cannot do, such as skew and 3d rotation.
keep in mind that .animate works in all browsers while this needs a modern browser that supports CSS3.
it enhances jquery's own animate function making animations use CSS3 hardware accelerated equivalents in browsers that support them while using the original jquery software mode when not supported. and you don't need to change a single line of code on your site since its completely transparent.
https://github.com/robdodson/amd-css3-ease
And I talk about it in this blog post, but it's really easy to use: http://robdodson.me/blog/2012/05/27/penner-easing-equations-...
Credit really goes to Matthew Lein who converted the equations to CSS3: http://matthewlein.com/ceaser/