JQuery Transit - CSS3 animations for jQuery | Hacker News Reader

JQuery Transit - CSS3 animations for jQuery

ricostacruz.com

168 pointssuperchink26 comments

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.

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.

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

Brilliant. Thanks for that.

Thank you

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

Works in Firefox 12 as well.

It _should_ also work in Internet Explorer 10.

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/

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.

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.

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

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.

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.

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

Client-side UA sniffing in 2012?

Ugh.

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

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

> CSS fallbacks don't work.

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

(Not that it matters anymore.)

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

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

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.

Apropos of the upcoming Venus transit of the sun?

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

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.

What about people who want to write Hype or Sencha?

Reply on news.ycombinator.com