Skip to content

Enhancing jQuery’s animate function to automatically use CSS3 transitions

by benbarnett on September 1st, 2010

On a client project recently, we’ve been working with some heavy full page transitions, which can look extra lovely when on hardware accelerated browsers and devices. I was struggling to find a neat way to write the front-end code, which is using jQuery, to degrade and enhance itself automatically without putting switch statements and creating multiple stylesheets all over the place.

This is where my jquery-animate-enhanced plugin comes in. The idea was to have a one hundred percent seamless integration, and backwards compatibility with older browsers. For this reason, it just extends $.animate() which we all know and love and detects if you’re trying to animate something that would be better off done with a CSS3 transition. Absolutely zero effort required.

The plugin.

Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+

Properties supported: (more to come)

  • left : using translate(x, y) or translate3d(x, y, z)
  • top : using translate(x, y) or translate3d(x, y, z)
  • opacity

Note that any properties not mentioned above will simply be handled by the standard jQuery $.animate() method. This plugin adds new functionality without taking any away.

Demo

Check out a working demo on the plugin’s homepage.

What it does

The plugin will analyse the properties you’re animating on, and select the most appropriate method for the browser in use. This means your transitions on left, top and opacity will convert to a CSS3 transition on Webkit & Mozilla agents that support it, and Opera 10.50+. If the user is on a browser that has no CSS3 transitions, this plugin knows about it and won’t get involved. Silent degradation :)

Multiple callback mechanisms are created internally to monitor for DOM manipulation and for all ‘transitionend‘ CSS3 events to be picked up. This means you have one neat callback() for the whole animation regardless on whether the plugin is using CSS3, DOM, or both for its animations.

Progressively enhanced CSS3 animations without having to do any browser detection or special CSS, therefore using the same Javascript across your applications and websites.

As this plugin uses CSS3 translate where available, there is an internal callback mechanism to reset the ‘left’ and/or ‘top’ properties so that your layout is unaffected.

Usage

Usage is identical to the jQuery animate() function, but it comes with 3 new paramaters, which are totally optional and safe to leave untouched for general use:

  • avoidTransforms: (Boolean)By default the plugin will convert left and top animations to the CSS3 style -webkit-transform (or equivalent) to aid hardware acceleration. This functionality can be disabled by setting this to true.
  • useTranslate3d: (Boolean)By default the plugin will use 2d translations due to wider browser support. Set this to true to use translate3d instead. Recommended for iPhone/iPad development (here’s why).
  • leaveTransforms: (Boolean)By default if the plugin is animating a left or a top property, the translate (2d or 3d depending on setting above) CSS3 transformation will be used. To preserve other layout dependencies, once the transition is complete, these transitions are removed and converted back to the real left and top values. Set this to true to skip this functionality.

Give it a go

More information is available either on the GitHub repository, or on the plugin homepage. Thoughts very much welcome.

From → Techniques

12 Comments
  1. Nice. Under which license do you release the code? I can’t find it anywhere.

    I think (hope) that with a plugin like this, the jQuery animate function will work smooth on the iPhone and iPad (and possibly other devices).

    • benbarnett permalink

      @Edwin – sorry for the slow response. The code is licensed under Creative Commons. More detail here: http://creativecommons.org/licenses/by-sa/3.0/

      One of the main reasons I wrote this was to ease iPad (and the like) development. Working on a project right now that’s doing exactly that actually.

      Hope you can find a use for it, would be great to hear how you get on.

  2. Hi Ben,

    What an excellent idea of extending the jQuery animation function!
    I used to rewrite animation codes by hand to make them use CSS3 transformations, but a generic conversion is much nicer :-)

    But there’s a problem. I tried to hardware accelerate Marcofolio’s iPhone springboard with your animate-enhanced plugin.
    But bringing elements from outside the view to the inside didn’t work in cssTransitionsSupported browsers, the original jQuery did fine though.
    What does work is:
    1. setting css left and top to 0.
    2. first animating all to outside
    3. now bringing them back in

    What we want is just only step 3. Example here:
    http://www.b-online.nl/springboard/index.html

    I hope you can fix this in v0.4, thanks in advance.
    Ralf

  3. Angy Gollan permalink

    Keep up the excellent work, bookmarked and referred a few mates.

  4. Steven Forehand permalink

    Hi Ben. Great work. It seems to break the animations of any additionally included JS. For example, if I include an accordion object on my page along with the extended animate script you developed, it breaks the accordion’s animation. Same holds true for other plugins such as the Colorbox plugin. Any suggestions?

    Thanks and again good work.

    • benbarnett permalink

      Hi Steven,

      Thanks for the feedback and for trying it out. Do you get any specific errors?

      There are a few advanced features such as animation ‘step’ and ‘stop’ which aren’t quite right yet, but the rest of jQuery’s animations should be fine.

      Which accordian plugin are you using, could you send over a link to your page so I can have a look?

      • Steven Forehand permalink

        Hi Ben

        Sorry it took so long for me to get back to you. I dont have a public site using the accordion (all local dev). However, I am using the default accordion object that is provided by jQuery. Have you run into any issues using it?

        • benbarnett permalink

          When you say the default one, do you mean you’re using jQuery UI? I.e. this one: http://docs.jquery.com/UI/Accordion

          Could you also let me know which versions you’re using and I’ll have a look.

      • Alex permalink

        Hi Ben,

        thanks for this nice piece of work. I want to use it to accelerate an image carousel developed for the iPad. It works well except that the step-callback does not work. I need this callback option to compare the width of two images and set the appropriate z-index of each.

        Will there be support for the ‘step’ option soon? It would be great!

        • benbarnett permalink

          Hi!

          Yeah ‘step’ functionality is the next thing on my list, its really important for more complex animations as you say. Its quite an involved job though so I’ll do my best to get it done as soon as possible. Feel free to stay posted over at the Github page http://github.com/benbarnett/jQuery-Animate-Enhanced

  5. enrico permalink

    hey ben,
    thanks for your work.
    I was wondering if the plugin supports special easings like easeOutExpo or if it translate just the jQuery default ones like linear, swing, bounce, etc…

    thanks a lot,
    enrico

Trackbacks & Pingbacks

  1. Tweets that mention Enhancing jQuery’s animate function to automatically use CSS3 transitions | Ben Barnett's Blog -- Topsy.com

Comments are closed.