May 5, 2011 139

Flux Slider – CSS3 Animation based image transitions

By

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!1

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 []
  • http://www.joelambert.co.uk Joe Lambert

    There is an official plugin for WordPress (http://www.joelambert.co.uk/flux-wp), which I may port to other CMS’s if there is enough demand.

    Setting up a basic slider is pretty easy, full instructions on the GitHub page but the integration with the CMS, auto image resize/cropping etc requires a bit more work.

  • http://www.facebook.com/richfergus Rich Ferguson

    Joe, are there plans to add a simple href tag to individual slides?

  • http://www.joelambert.co.uk Joe Lambert

    Hey Rich, this is currently possible in the pre-release version in the GitHub repository: https://github.com/joelambert/Flux-Slider

    See the ‘Usage’ section for details.

  • Pingback: CSS Animation Based Image Transitions - Flux Slider | webtrendset

  • http://giometri.com egiova

    Very cool, I test it in several conditions, and it’s very smooth. In spite of support limitations, for now, I’m pretty sure your project will come soon to maturity.  Brilliant idea, thanks for sharing. 

  • http://www.joelambert.co.uk Joe Lambert

    Thanks, IE10 should bring transition support which will mean that all the major browsers then have support :)

  • Sebastian Becker

    Cool, thanks! :-)

    What about lazy loading and responsive design?

  • http://www.joelambert.co.uk Joe Lambert

    Hi Sebastian, lazy loading is possible but requires some hacking about overloading some methods. I’m not sure if this ought to be part of the core code or not, perhaps in the meantime I could write a short tutorial on how to load arbitrary images after load time?

    Responsive design is a tough one given the way the slider works. For transitions without slices (fades, slides, cube etc) this is fairly trivial but to actually make Flux completely responsive is difficult. I am currently experimenting with ways to make this possible though as I’ve had a few requests for this feature.

  • Pingback: Flux Slider: Bringing Nivo Slider to CSS3 level | JD Design

  • Pingback: Collection of CSS techniques | Servage Magazine

  • Pingback: Amazing CSS3 techniques you should know « The Blog of Jordan Rynard

  • Pingback: Amazing CSS3 techniques you should know | Tutorial Scribe

  • http://www.yourdigitalspace.com/ Swamykant

    Seems cool. Thanks 

  • http://davgothic.com David Hancock

    Brilliant slider Joe! Really impressive, however it’s a crying shame IE doesn’t support CSS3 transitions!

  • http://www.joelambert.co.uk Joe Lambert

    Thanks David, appreciate the support.

    IE is a pain but there is some hope as IE10 will have support for transitions, the issue being that it will be years before its actually used by enough people!

  • Pingback: 8个应该了解的CSS3技术 - 博客 - 伯乐在线

  • Pingback: 28 jQuery und CSS3 Slider » FRISCH INSPIRIERT

  • http://twitter.com/callumkerr1991 Callum Kerr

    That’s an incredible demo you have there! I’ll be keeping an eye on progress, looking forward to seeing how far it goes =]

  • http://www.joelambert.co.uk Joe Lambert

    Thanks Callum

  • Ito

    Hi. The slider is awesome but I would like to report a bug. Internet Explorer 9 supports CSS3, but it looks like the slider ignores IE automatically. From where I can enable that, and will you include the change in future versions. Thanks.

  • http://www.joelambert.co.uk Joe Lambert

    IE9 supports some CSS3 but not transitions which is what Flux needs. Support for transitions should be available in IE10.

  • Paul

    Hi Joe, I am not a programmer. I love your image slider. I have added it to a site, but I cannot figure out two things, I hope you can help. 1. I only want the swipe transition 2. I don’t need the navigation numbers below the image http://www.sharksite.ca/sharktestsites/haddonhouse/testslider.html Can you help me with this? Thanks, Paul

  • http://www.joelambert.co.uk Joe Lambert

    Hi Paul, here’s a quick code snippet that shows how to setup Flux in the way you want:

    https://gist.github.com/1501502

    Hope that helps

  • Paul

    Thanks, perfect!

  • Paul

    Hmm, I may have spoke too soon. It works fine on my mac, but does not work on our PC, firefox or IE?

    http://www.sharksite.ca/sharktestsites/haddonhouse/index.html

  • Paul

    Actually not in Firefox on my mac either???

  • http://www.joelambert.co.uk Joe Lambert

    Hi Paul, this is unfortunately the expected behaviour. Flux uses CSS transitions which IE doesn’t currently support (will do in IE10).

    The ‘swipe’ transition is also a unique effect as it requires a browser to have implemented CSS masks, which currently only Safari & Chrome do. This is why its not working in Firefox for you.

    Flux detects what features the current browser is able to manage and uses a fallback effect when nothing suitable is found. The default fallback is to just switch between images but you can overwrite this fallback with a small amount of code to make use of jQuery animate if you so desire.

    I hope that helps, the documentation for Flux which details the browser support etc can be found on GitHub: https://github.com/joelambert/Flux-Slider

  • HenryC

    can it use on weebly blog?

  • http://www.joelambert.co.uk Joe Lambert

    I’m afraid I have no experience with Weebly. If you can use custom JavaScript and CSS then I suspect you can use Flux.

  • Stevie Mccann

    I’d really like to impliment this into a website, but new with jQuery, is there is how-to guide for this? paste what code where etc?  

  • Lucalucian Eu

    Hi, Awsome slider. Please tell me: how i can do that: when site is accesed with internet explorer, make to don’t appear window: Flix Sloder require a browser that support CSS3 transition and slider to be normally ( without transitions )

    Thank you

  • Lucalucian Eu

    Hi, I resolved with IE. I have another problem: in firefox, slider appear in right of screen, not in center like in other browsers

    How can i fix that ? Thank you

  • http://www.joelambert.co.uk Joe Lambert

    Have you tried looking at the docs on GitHub? https://github.com/joelambert/Flux-Slider

    Let me know if you have trouble deciphering them, it might be useful for me to do a simple walkthrough blog post for people new to jQuery.

  • http://www.joelambert.co.uk Joe Lambert

    Could you open a ticket on https://github.com/joelambert/Flux-Slider/issues with a link to an example of the problem you’re having so that I can take a look?

  • Gianfranco

    Hi, great work. I have a problem with the change of transitions. Can you explain me the process please?

    Tranks a lot.

  • http://www.joelambert.co.uk Joe Lambert

    Hi Gianfranco,

    Could you open a ticket at https://github.com/joelambert/Flux-Slider/issues with a description of your problem and preferably a link to the code so I can take a look?

  • Tom12010

    Does this code require all the images to be the same size?? Thank you, Tom

  • http://www.joelambert.co.uk Joe Lambert

    It does yes. If you’re using WordPress then you might be interested in the Flux Slider WordPress plugin which can handle the resizing for you automatically: http://www.joelambert.co.uk/flux-wp

  • JSteppin

    I have implemented the slideshow but now my form validation has broken any ideas on why this may have happened?  Ill post the code here in a little bit.

  • Qla46

    2D Effects not working in ie9? Any ideas?

  • http://www.joelambert.co.uk Joe Lambert

    IE9 doesn’t have support for CSS3 transitions, you’ll have to wait for IE10 I’m afraid.

  • Paololuk

    When I try to load retina images (@2x) with a class applied, Flux loads correctly but the images are too big! They goes out of the screen! There’s a way to implement this? Thanks.

  • http://www.joelambert.co.uk Joe Lambert

    Flux can’t take into account any use of background-size that you may be using to enable retina images which is why its not working for you.

    This may be something that is added in future releases but I’m afraid its not currently supported.

  • Paololuk

    thanks anyway… Flux Slider rocks! :)

  • Cenk

    8 using windows operating system. I have windows 8, ie10. ie10′da transitions not working correctly.

  • http://www.joelambert.co.uk Joe Lambert

    Thanks, I’ll look into this

  • Mcyenikoylu

    internet explorer does not work in version 10.

  • http://www.joelambert.co.uk Joe Lambert

    Thanks, I’ll take a look. I’ve not had chance to play with the pre-release yet

  • Marcus

    3D options are not available for the chrome version 21.0?

  • http://www.joelambert.co.uk Joe Lambert

    Working for me, Chrome 21 on Mac. Are you having problems with the main website (http://www.joelambert.co.uk/flux/ ) or a custom install?