
JQuery Transit - CSS3 animations for jQuery - superchink
http://ricostacruz.com/jquery.transit/
======
kyriakos
alternatively you can use jQuery Animate Enhanced plugin.
<https://github.com/benbarnett/jQuery-Animate-Enhanced/>

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.

~~~
bratsche
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.

------
elktea
The 3D transformation marked 'Webkit only' works fine in Firefox Nightly

~~~
rmccue
Works in Firefox 12 as well.

------
robdodson
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:

<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-...](http://robdodson.me/blog/2012/05/27/penner-easing-equations-
with-gfx-and-css3/)

Credit really goes to Matthew Lein who converted the equations to CSS3:
<http://matthewlein.com/ceaser/>

------
molokoloco
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.

------
josscrowcroft
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.

~~~
riccardom
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.

------
DanielRibeiro
Cool! Note that rotations also work on 12, in spite of it saying "Webkit only"

------
chucknelson
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.

------
domwood
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.

------
darkstalker
similar library: <https://github.com/visionmedia/move.js>

------
mkmcdonald
Client-side UA sniffing in 2012?

Ugh.

Flagging a browser because "something doesn't work" is just lazy.

~~~
rocktronica
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...)

~~~
noibl
> CSS fallbacks don't work.

[IE6] <http://www.cssplay.co.uk/layouts/fixed.html>

(Not that it matters anymore.)

------
majorlazer
The site background doesn't seem to be loading in Chrome 19, works fine in FF
12 though.

------
andrewfelix
Can anyone summarise the benefits of this over '.animate'?

~~~
kyriakos
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.

------
th0ma5
Apropos of the upcoming Venus transit of the sun?

------
noni
why build these by hand, use a tool like Hype or Sencha

~~~
chucknelson
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.

