Update (2011/05/26)
Flux Slider is now compatible with both jQuery & Zepto.js, supports more than just WebKit browsers & is available for download/forking from GitHub.

I’ve been experimenting a lot lately with the lesser used aspects of CSS3, specifically with the powerful new CSS3 animations/transitions pioneered by the Webkit team (read more about CSS3 animations). This has, in part, been inspired by the guys at Sencha & Matteo Spinelli‘s Cubiq blog and also an increasing need for better performance on mobile devices. CSS3 animations really are an evolutionary leap forward in simplicity and power but most importantly they can also be hardware accelerated under an increasing number of browsers!¹

One of my favourite jQuery plugins is Nivo Slider, its one of the plugins that on first sight you can’t believe is just Javascript & CSS. Essentially its some very elegant transitions that can be applied to images to produce a slideshow on your website. Nivo makes use of Javascript animations and specifically the jQuery animate() function to perform its transitions, this works very well on most desktop machines but what about lower spec devices such as mobiles and tablets? I tested it on my iPhone 4 and iPad and on both, the animations appeared very unsmooth.

So could this be improved if we instead used CSS animations?

Introducing Flux Slider which is my experimental attempt to enable Nivo style image transitions but instead of using the traditional Javascript timer based animations to utilise the newer, more powerful CSS3 animations. Its in a fairly early/rough state at the moment but testing on the iPhone/iPad does appear to produce much smoother animations. Desktop performance (as with Nivo) is very smooth but the use of CSS3 enables us to produce some new effects that Nivo can’t, e.g. rotations.

Demonstration

If you have a Webkit based browser (Safari, Chrome, iPhone, iPad, iPod Touch) browser that supports CSS3 transitions then you can check out a demo here. Otherwise you can take a look at a video capture below.

View Demo | Source & Doc’s @ Github

Currently I’ve implemented the following transitions:

• Bars image is split into bars and they fall away vertically down from left to right
• Zip same as ‘bars’ apart from alternate bars fall up and down like a zip opening
• Blocks image is split into blocks (rows/columns) which fade away at random
• Concentric image is split into concentric circles which twist clockwise and fade out
• Warp same as ‘concentric’ except each alternate circle twists clockwise/anti-clockwise

Update (2011/05/26)
For a complete list of the currently supported transitions check out the Transition Gallery.

Future plans

Once the core code is more stable I’ll release it and write a short tutorial post on how to use it on your site or write your own transitions.

Update (2011/05/26)
The code & documentation is now available via GitHub.

Currently the code requires jQuery but the aim is to make it also work with Zepto.js as a replacement. Zepto is a new, Webkit only, microframework written by Thomas Fuchs and aims to replicate most of the jQuery API without all the cross-browser bloat. The ability to use jQuery or Zepto would make Flux a much stronger candidate for mobile deployment. As Zepto has been written to emulate the same API calls as jQuery, getting Flux to work with either framework transparently shouldn’t be a difficult task (I hope!).

Update (2011/05/26)
Flux now supports either jQuery or Zepto.js

1. Not all properties are hardware accelerated on all browsers, for info on debugging hardware acceleration of CSS3 see my previous post [↩]