Subscribe to get my new tutorials in your inbox.

CSS3 Coverflow animation for iOS – Adding Touch gestures

Here’s a sneak peak at the touch version of the Coverflow animation. The app is fully touch enabled, you can swipe across the screen to move the images or tap on any image individually to move it. The app works fine in iPhones, iPod touch and iPad’s. Have not tested it in Android 4.0 or greater. Since iOS browsers supports CSS3 3D transformations so it runs very smooth. In Androids < 4.0  it gives a horrible  look n feel.

Here’s the link to the demo. Check in an iOS device (open up in mobile safari),


and if you are looking for a desktop version of the Coverflow, you can check my previous post.

This is how it looks on an iPod touch

I am still completing the descriptive write up and compiling some images so that the demo is explained properly. However, I have added comments to the code in the current demo so that you will get at least some idea of what I am trying to do. All in all there are three files,

1) index.html

2) style.css

3) script.js

and there is also an images folder which has the images of the superheroes. I also have a download link at the bottom of the post.

Some features are,
1) Touch enabled. Use your finger to control. It is a single touch app.
2) Smooth movements because of CSS3 Transitions and Transformations.
3) CSS3 Reflections.
4) Very lightweight, its all custom javascript, css, html. No external libraries. No JQuery..

Some of the failures are,
1) I have only supported portrait mode. This doesn’t mean that the coverflow stops working in landscape mode. Its just that the images does not position them accordingly as per the device screen. So 320 x 416 is what I have considered as my boundary for now. If you are checking this in an iPad, the images will still be smaller. You have to work on it a little to make it of iPad size.
2) There are still 7 images as the desktop version (I have not really got much time to make it more dynamic). You can always build on top of this.
3) There are hardcoded co-ordinate values. Again, I haven’t really sat down and tried to clean this up into a more robust and dynamic app. I will try it definitely.

Download the source code here.

  1. Kiran

    Thank you for this. I was using jquery touch punch but I am unable to get the “smoothness” in transitions. Going to give this a try. Thanks for the post!

      • Kiran

        This gives me better control over the movement compared to touch punch I feel. Works great. Although my animation code has some bugs which is why it is still a bit choppy. And ofcourse performance goes down since I am dynamically adding more and more covers as I swipe forward. But swipe works just fine. Thanks!

        • joseph

          Hi Kiran,
          Just try to improvise on the code that I wrote, I am sure that you will have better results. Even my code needs a bit of cleaning. I will work on the dynamic no. of images and landscape support as well. Using CSS3, I found the animations to be much smoother and more realistic and it is light weight as well. I hope you have tried the demo link in an iOS device..

  2. Kiran

    Well the problem is two parts. Something is off with my calculations on moving left/right. But the main reason for the sluggishness is the increased number of covers. Max of 60 and I start paginating. I tried this on an Android and Ipad. I am working on hiding covers that are no longer in view. Thanks.

    • joseph

      Yes, you might have problems with large number of covers with my demo code. I used only a fixed 7 images. Somehow you have to write a logic to automatically handle more number of images. I am also trying that.

      • Kiran

        Well after taking a break for day the solution is pretty straightforward. Thanks to your swipe functionality I already have what I need. Since I can have as many as 60 covers on the page, I simply keep track of how far I have swiped forward and then just opacity 0 the earlier covers, and then fade them back in as I go backwards in the coverflow. This keeps my “visible” covers at always 20 and keeps the performance consistent without bogging down.

        Maximum points for your swipe tutorial. Awesome.

  3. Sushil

    Hi Joseph,
    Can you please share your code if have provided the support in landscape mode/dynamic adding of images. I am newibee to Js and don’t know how to make it support for landscape.

    • joseph

      Hi Sushil,
      I have not developed anything for supporting the landscape mode. But if you want the code for portrait mode, then you can checkout the code in the demo.

  4. Sushil

    Hi Kiran,
    Can we get to see your demo please if you are done with renewing of your domain and can you also please the source code?

  5. John

    Is there anyway to adjust the sensitivity on the drag? Example: I would like to swipe finger and it just go to the next image, rather then jump all the way to the end or multiple images over.

Write a Comment

Your email address will not be published. Required fields are marked *