Save over 40% when you secure your tickets today to TNW Conference 💥 Prices will increase on November 22 →

This article was published on June 4, 2012

jQuery Transit brings super-smooth CSS3 transformations and transitions to jQuery


jQuery Transit brings super-smooth CSS3 transformations and transitions to jQuery

Every once in a while, we like to highlight our favorite tools for Web designers, and right now a plugin by the name of jQuery Transit has caught our attention. And so, if you have ever searched for a simple way to bring smooth CSS3 transformations and transitions to jQuery, look no further.

There are other plugins out there that work similarly, including Move.js, jQuery animate enhancedjQuery 2D transformations and jQuery CSS3 rotate, as creator Rico Sta. Cruz explains, but the robust nature of jQuery Transit, in addition to the exceptional way the plugin is documented on the site, makes the entire setup process highly approachable — even for someone who isn’t too familiar with jQuery or JavaScript.

To get started, simply include this script after jQuery, and then follow the guides for the available transformations: translate, rotate, perspective, scale, skew and so on.

The 💜 of EU tech

The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!

Right now, the plugin is supported in IE 10+, Firefox 4+, Safari 5+, Chrome 10+, Opera 11+ and Mobile Safari. If the visitor uses an older browser, the plugin degrades by “simply not doing the transformations (rotatescale, etc) while still doing standard CSS (opacitymarginLeft, etc) without any animation.”

Check out the plugin via the link below and on Github, and then feel free to share your thoughts in the comments!

➤ jQuery Transit

For more, you might also want to take a look at the Scrollorama jQuery Plugin, this list of 5 free jQuery plugins for Web designers and this jQuery plugin which allows you to turn any HTML element into a kitten (yes, seriously!).

Get the TNW newsletter

Get the most important tech news in your inbox each week.