JQuery Transit - CSS3 animations for jQuery

by superchink • 14 years ago

168 26 14 years ago

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

domwood• 14 years ago

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.

th0ma5• 14 years ago

Apropos of the upcoming Venus transit of the sun?

mkmcdonald• 14 years ago

Client-side UA sniffing in 2012?

Ugh.

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

rocktronica• 14 years ago

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• 14 years ago

> CSS fallbacks don't work.

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

(Not that it matters anymore.)

majorlazer• 14 years ago

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

darkstalker• 14 years ago

similar library: https://github.com/visionmedia/move.js

andrewfelix2• 14 years ago

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

kyriakos2• 14 years ago

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.

kyriakos2• 14 years ago

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.

andrewfelix2• 14 years ago

Brilliant. Thanks for that.

dmak• 14 years ago

Thank you

mbjones• 14 years ago

I recently started using Transform.js http://transformjs.strobeapp.com/ and I've enjoyed it.

bratsche• 14 years ago

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• 14 years ago

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

rmccue• 14 years ago

Works in Firefox 12 as well.

TazeTSchnitzel• 14 years ago

It _should_ also work in Internet Explorer 10.

josscrowcroft• 14 years ago

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• 14 years ago

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.

noni• 14 years ago

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

richbradshaw• 14 years ago

What about people who want to write Hype or Sencha?

chucknelson2• 14 years ago

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.

molokoloco• 14 years ago

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.

chucknelson2• 14 years ago

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.

robdodson• 14 years ago

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

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

JQuery Transit - CSS3 animations for jQuery

Related Stories