{"id":6360,"date":"2010-05-12T06:16:17","date_gmt":"2010-05-12T13:16:17","guid":{"rendered":"http:\/\/css-tricks.com\/?p=6360"},"modified":"2010-12-18T18:07:59","modified_gmt":"2010-12-19T01:07:59","slug":"circulate","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/circulate\/","title":{"rendered":"Circulate"},"content":{"rendered":"<p>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&#8217;t an obvious solution to this already with jQuery. So I figured out a way, and made a plugin out of it.<\/p>\n<div class=\"image-wrap\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/unicornsbackwards.png?resize=489%2C164\" width=\"489\" height=\"164\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p>This unicorn can fly friggin backwards with this plugin.<\/p>\n<\/div>\n<p><a href=\"https:\/\/css-tricks.com\/examples\/Circulate\/\" class=\"button\">View Demo<\/a> &nbsp; <a href=\"https:\/\/css-tricks.com\/examples\/Circulate.zip\" class=\"button\">Download Files<\/a><\/p>\n<p><!--more--><\/p>\n<h3>The Empowering Concepts<\/h3>\n<p>This is a jQuery plugin, so obviously it relies upon the <a href=\"http:\/\/jquery.com\" rel=\"noopener\">jQuery<\/a> library. Specifically, jQuery 1.4 or later, because we are using the .animate() functions new ability to have <a href=\"http:\/\/james.padolsey.com\/javascript\/easing-in-jquery-1-4a2\/\" rel=\"noopener\">per property easing<\/a>. This means we can animate the &#8220;top&#8221; value with one easing function while animating the &#8220;left&#8221; value with a different easing function. All this talk of easing&#8230; I should say that not only does this require jQuery 1.4+, it also requires the <a href=\"http:\/\/plugins.jquery.com\/files\/jquery.easing.1.2.js.txt\" rel=\"noopener\">easing plugin<\/a>. Here is the idea:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/anarc.png?resize=570%2C407\" width=\"570\" height=\"407\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p>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. <\/p>\n<h3>Features<\/h3>\n<p>You can declare speed, height, and width. Those are pretty obvious \/ standard \/ expected parameters for a plugin like this. There are three others though:<\/p>\n<ul>\n<li><strong>sizeAdjustment<\/strong>: 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.<\/li>\n<li><strong>loop<\/strong>: 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: $(&#8220;#thing&#8221;).circulate(&#8220;stop&#8221;);<\/li>\n<li><strong>zIndexValue<\/strong>: accepts an array of four numeric values. These values set the z-index CSS property at each of the four points of the animation.<\/li>\n<\/ul>\n<p>Here is the full set: <\/p>\n<pre><code class=\"javascript\">$(\"#anything\").circulate({\r\n\r\n    speed: 400,                  \/\/ Speed of each quarter segment of animation, 1000 = 1 second\r\n    height: 200,                 \/\/ Distance vertically to travel\r\n    width: 200,                  \/\/ Distance horizontally to travel\r\n    sizeAdjustment: 100,         \/\/ Percentage to grow or shrink\r\n    loop: false,                 \/\/ Circulate continuously\r\n    zIndexValues: [1, 1, 1, 1],  \/\/ Sets z-index value at each stop of animation\r\n\r\n});<\/code><\/pre>\n<h3>BETA<\/h3>\n<p>As-is, I&#8217;m going to call this a Beta release. Mostly because it doesn&#8217;t work very well in Opera. If anyone is a big Opera fan and cares to figure out what is wrong with it, I&#8217;m all ears. <\/p>\n<p>It&#8217;s also Beta because I haven&#8217;t gotten a ton of feedback on it, so I&#8217;d like to react to any of that that comes in and make changes as necessary. For example I&#8217;m thinking a callback function parameter might be a good idea. Also, I&#8217;m sure there are some parts that could be written a bit more efficiently. <\/p>\n<p><a href=\"https:\/\/css-tricks.com\/examples\/Circulate\/\" class=\"button\">View Demo<\/a> &nbsp; <a href=\"https:\/\/css-tricks.com\/examples\/Circulate.zip\" class=\"button\">Download Files<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":168883,"url":"https:\/\/css-tricks.com\/improving-ui-animation-workflow-velocity-js\/","url_meta":{"origin":6360,"position":0},"title":"Improving UI Animation Workflow with Velocity.js","date":"April 30, 2014","format":false,"excerpt":"The following is a guest post by Julian Shapiro. Julian recently released Velocity.js, a more performant jQuery replacement for .animate(). He recently wrote about how JavaScript animations can be so fast over on David Walsh's blog, a topic we've covered here as well. In this article, Julian introduces Velocity.js itself.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154511,"url":"https:\/\/css-tricks.com\/animating-dom-transitions\/","url_meta":{"origin":6360,"position":1},"title":"Animating DOM transitions","date":"October 29, 2013","format":false,"excerpt":"Say you add some new element to the page and it pushes things around. That can happen instantly, but it helps your brain understand what just happened if the elements that were pushed away animate to their new position. Enter Alex MacCaw and his new magicMove jQuery plugin: The library\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":179204,"url":"https:\/\/css-tricks.com\/add-page-transitions-css-smoothstate-js\/","url_meta":{"origin":6360,"position":2},"title":"How To Add Page Transitions with CSS and smoothState.js","date":"August 15, 2014","format":false,"excerpt":"CSS animations (and a little JavaScript trickery) can let us add page transitions and move away from the hard-cut of page loads. My jQuery plugin smoothState.js helps polish those transitions and improve UI response times. Page transitions benefit the user experience Imagine, for a second, how disorienting it would be\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6265,"url":"https:\/\/css-tricks.com\/jquery-ui-position-function\/","url_meta":{"origin":6360,"position":3},"title":"jQuery UI&#8217;s Position Function (plus, MagicZoom from scratch)","date":"April 30, 2010","format":false,"excerpt":"Knowing how to position things where you want them is one of the most important tools in a web designer's toolbox. Understanding page flow, understanding everything is a box, understanding floats, etc. Once the basics are learned, a common question for intermediate designers is how to position elements relative to\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/uipositionsimple.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":824,"url":"https:\/\/css-tricks.com\/garage-door-style-menu\/","url_meta":{"origin":6360,"position":4},"title":"Garage Door Style Menu","date":"October 25, 2010","format":false,"excerpt":"Originally published on July 21, 2008 as only a jQuery technique. Now updated to include CSS3 and a combo technique which is mo' betta. A garage door style menu is where an image (the \"door\") slides up to reveal something behind it. We'll do this in two ways, with CSS3,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/window.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":4911,"url":"https:\/\/css-tricks.com\/full-jquery-animations\/","url_meta":{"origin":6360,"position":5},"title":"Fully Executing jQuery Animations Without Queuing","date":"December 14, 2009","format":false,"excerpt":"It is pretty common when using jQuery's .animate() function that it is triggered by a mouseEnter or hover event. This means that we need account for those events being triggered multiple times. This article goes through my journey of trying to find a good solution for this, and ultimately a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/6360"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=6360"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/6360\/revisions"}],"predecessor-version":[{"id":8166,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/6360\/revisions\/8166"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=6360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=6360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=6360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}