Grow your CSS skills. Land your dream job.

Circulate

Published by Chris Coyier

I had the occasion come up recently where I needed to animate something in a circle. It never occurred to me until then that there wasn't an obvious solution to this already with jQuery. So I figured out a way, and made a plugin out of it.

This unicorn can fly friggin backwards with this plugin.

View Demo   Download Files

The Empowering Concepts

This is a jQuery plugin, so obviously it relies upon the jQuery library. Specifically, jQuery 1.4 or later, because we are using the .animate() functions new ability to have per property easing. This means we can animate the "top" value with one easing function while animating the "left" value with a different easing function. All this talk of easing... I should say that not only does this require jQuery 1.4+, it also requires the easing plugin. Here is the idea:

So if we do that four different times, flipping around the easing functions and adding/subtracting as necessary, we can get a circle. And not just a circle really, but any ellipse defined by height and width.

Features

You can declare speed, height, and width. Those are pretty obvious / standard / expected parameters for a plugin like this. There are three others though:

  • sizeAdjustment: a percentage adjustment. Default is 100 (stays the same). Lower than 100 = shrinks to that percentage at the half-way point and then back up. Higher than 100 = grows to that percentage at the half-way point and then back down.
  • loop: Default is false. True means the loop will run recursively. You can stop a current loop by calling the plugin on that element with just a single string parameter: $("#thing").circulate("stop");
  • zIndexValue: accepts an array of four numeric values. These values set the z-index CSS property at each of the four points of the animation.

Here is the full set:

$("#anything").circulate({

    speed: 400,                  // Speed of each quarter segment of animation, 1000 = 1 second
    height: 200,                 // Distance vertically to travel
    width: 200,                  // Distance horizontally to travel
    sizeAdjustment: 100,         // Percentage to grow or shrink
    loop: false,                 // Circulate continuously
    zIndexValues: [1, 1, 1, 1],  // Sets z-index value at each stop of animation

});

BETA

As-is, I'm going to call this a Beta release. Mostly because it doesn't work very well in Opera. If anyone is a big Opera fan and cares to figure out what is wrong with it, I'm all ears.

It's also Beta because I haven't gotten a ton of feedback on it, so I'd like to react to any of that that comes in and make changes as necessary. For example I'm thinking a callback function parameter might be a good idea. Also, I'm sure there are some parts that could be written a bit more efficiently.

View Demo   Download Files

Comments

  1. Danilo

    Awesome!

    • Its awesome , amazing, never-seen before, never thought before.
      Your demo is just perfect. Everything is moving in some way.
      I was playing for few minutes with colored balls.
      Awesome…
      Thanks for providing such a stuff..

    • definitely

    • bill

      I like the use of multiple animation parameters, and visually it’s nice, but in reality how am I going to use this? It’s a novelty. Rotating unicorns and balls is great for Geocities circa 1997.

    • Sander

      That is how i looked at it at first,
      but there is a simplar jquery plugin already existing.
      and we used it for a carrousel of avatars to be picked at our profile page.
      they don’t have to move automatically, they can be animated 1 by one, with left and right buttons for example.
      still having the arc animation as if it truely was a carrousel instead of just sliding left and right behind invisible walls.

      the plugin we used is this:

      http://fredhq.com/projects/roundabout/

      another possible use could be the carrousel of projects like on the jquery website

      http://jquery.org/

  2. Nice plugin! Now–let’s get the content inside the container to too! :-) You’re the man.

  3. Rob

    This could definitely stand to be optimized. CPU usages goes from 8% to 30-50% with this running.

    • You are right ROB. I checked for CPU usage it is increasing much.

    • Well, it’s not exactly Flash ;-) but my processor did jump from 5% up to 22%. This is with the CRAZY example looping as well. I’m on a 64-bit Core i5. Also, “CRAZY” turns into “CRAZ Y” and sometimes “CRA ZY” depending on how long it loops. I’m not sure where or how I’d use it, but good stuff, Chris!

  4. Need plugin.

  5. Just amazing !!!

  6. Laura

    That’s why I believe in God

  7. MichaƂ Czernow

    In 1024×768 horizontal scrollbar appears at some point of circulation and gets smaller down to its disappearence.

    • Joni Sakasho

      You can fix it with a container div which has overflow:hidden. Just resize the container to be window’s width and height at start and whenever resized. =)

  8. That’s crazy, I was just trying to do this in CSS3 (it’s surprisingly not too hard.) Nice work!

    • Do share! I suppose you could use CSS3 transitions to adjust the top/left values, but I didn’t know you could set per-property easing. Do you have a demo?

  9. lklk

    I for myself have learned a lot from your site.
    Nice work …

  10. Did you ask Smashing Magazine for permission to steal the “G” from their logo? :–)

  11. Phenomenal! This further bridges the gap between JS and Flash.

  12. You’re a friggin’ smart dude, Chris.

  13. Impressive. I like the demo of 3 balls (at the bottom) very much. It’s so cool.

  14. I think that’s one of the most ridiculous examples of a jQuery plugin I’ve ever seen. I love it lol

  15. Looks pretty good !!

    But the effect in IE7 isn’t as good when compared to other browsers

  16. Akbar

    Just Awesome! I just watched and wonder. I’m dying to start learning jQuery.. but still lot to learn about CSS. ! you are awesome Chris!

  17. Haha… I love that unicorn!

  18. Seal

    Brilliant.

  19. I can’t help but laugh, but this is so great. Well done.

  20. what a idea!!!

  21. This is easily the most impressive thing I’ve ever seen on this site. Nicely done!

  22. Athelstan

    Looks tremendous Chris!, Have you looked at the jquery.path attribute

    http://http://blog.parkerfox.co.uk/2009/09/22/bezier-curves-and-arcs-in-jquery/

  23. Jerm

    Navigation ideas anyone? lol very nice chris

  24. Beverly

    IE disappoints

  25. i must admit that recently some of your articles hadn’t captivated me like they used to, because they weren’t as relevant to my personal journey. but this article is absolutely brilliant and i think it might just revolutionise what i do with my websites.

    the animation is smooth and looks great. jquery is something that i have been wanting to improve my knowledge of, and you make it such fun to work with.

    you really excel yourself sometimes dude. big up yourself bro.

  26. It just had to be a unicorn…

  27. Wow! This is a nice one, animation using jQuery.

  28. I caught a glimpse of this a few days ago (you mentioned it in your talk bubble at the bottom of the page, I think). Two things catch my attention:

    1) On the three spheres, there is a noticeable “bump” when transitioning between easing sets (or whatever you want to call them, i.e., at the front/top and back/bottom of the circles). The side transitions seem smooth, maybe because they’re at a greater angle.

    2) With the text, if you let it rotate for some time, the letters start to circulate independently. I’m not sure if that’s intentional or not – I can think of some cases where it would be kinda neat, and others where it would definitely be undesirable.

    Looks cool overall!

    • … The scattering circles at the top are pretty cool too – I’d be interested in how those work.

  29. arnold

    the unicorn is awesome!
    lol I mean the demo.

  30. I have the lightbox2 plug-in in my site, I added the unicorn plug-in to the site and it will not work with the lightbox plug-in. Is there something I write in one of the plug-ins to fix the problem? I want to have a flying saucer rotate in place of the unicorn.

    Thanks!

  31. John Tanedo

    wow! and this is why I consider you a master of the force! I am your apprentice! btw chris these freebies we get from you? are we allowed to use this on our websites? Cause I would love to use some things from here and I would gladly put an acknowledgement on the codes and on my site linked to yours. . .

  32. +1 with Rob
    this take 35% of my CPU
    But the effect is very awesome ^^

  33. Kris Rapier

    Using Google Chrome and a Quad Core PC with 3 Gigs of RAM it uses a mere 7% of my CPU :)

  34. Earl

    Yes, Chrome seems get better performance!

  35. Nice!

    Maybe use SVG so the unicorn isn’t all jaggy?

  36. hohohohoho…we can make a thing be the fly…
    cool

  37. parasat

    ..sir. u make awesome effect ..thz for sharing

  38. Wow! This is pretty awesome!! Although, I can just see some clients ask for a spinning globe logo, but this time one that rotates around the site! LOL! Stay Awaaaaayyy!!!

  39. Great plugin, Chris!

  40. Cruz

    Wow…this thing just mesmerizes me! Kind of soothing in a way. Cool. I can’t wait to learn jQuery!
    I always enjoy your site. Thanks.

  41. beandip

    This would make for a really cool portfolio page. If you could set it up to where all your portfolio items were like the unicorn image, only turn the loop off and have a “next” and “prev” button to cycle through the portfolio.

  42. Very nice plugin Chris! Well done!

  43. Moon Orbiting Planet:

    I had an idea and tried it. Worked (kinda), but I’m just learning jQuery so there’s a couple things going on that I’d don’t know how to solve.

    Link

    1) at the bottom of the orbit, the moon’s orbit becomes wobbly. I don’t know why, or how it might be fixed.

    2) because I “rigged” one image to orbit the other (orbiting) image by wrapping everything in s and circulating those instead, I can’t get the images to resize. Don’t know how to fix that one, either.

    If anyone has ideas to address these issues, I’d love to hear!

    -thanks

  44. Cool effect….but I want to see how you did it, not use a plugin!

  45. Tobias Petersen

    About the opera bugs:
    The problem is that the computetd values for left and top in opera is computed as if the items were positioned absolutely in their static positions (instead of auto as the spec says in case om static or zero as firefox does). That causes them to be offset by this amount when the animation starts as jquery uses this as starting values. That basically means that the animation works in opera if you position the item to circulate inthe top left corner of a relative/absolutely layed out box.

  46. I always look forward to your alt tags.. like the one on the unicorn…

    For me this is yet another nail in the lid of the coffin for flash.. nice work

    Kevin

  47. Thats marvelous. By the way, before this post came out, I saw the demo page at delicious and bookmarked it then only. later when I searched for circulate on this blog, I couldnt find any post. I wonder, where people come to know about this beforehand. Anyways. awesome work. :)

  48. martin

    That’s very cool. I once tried to make a circular drag-and-drop menu using jQuery and CSS3, by animating an angle from 0 through 360 degrees and using mathematical functions in JS to convert between polar and rectangular coordinates. It didn’t quite work.

    If I’m not mistaken, one limitation of your method is that it wouldn’t be possible to pause the animation mid-cycle and have it resume from the same point. If the easing functions reset to zero, a paused object would resume with a new centre of rotation.

  49. Really cool. I’d like to be able to stop ‘mid-circle’… the line of thought being.. “when (x) is clicked, animate (x) and (x) along an ellipse of (x) where you’re essentially swapping two images with another along an arc.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".