{"id":244442,"date":"2016-08-16T06:00:57","date_gmt":"2016-08-16T13:00:57","guid":{"rendered":"http:\/\/css-tricks.com\/?p=244442"},"modified":"2017-04-10T17:34:25","modified_gmt":"2017-04-11T00:34:25","slug":"staggering-animations","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/staggering-animations\/","title":{"rendered":"Staggering Animations"},"content":{"rendered":"<p><em class=\"explanation\">The following is a guest post by <a href=\"http:\/\/desandro.com\/\" rel=\"noopener\">David DeSandro<\/a>. David wanted to offer a new feature in <a href=\"http:\/\/isotope.metafizzy.co\/\" rel=\"noopener\">Isotope<\/a>: staggered animations. Like so many things web, there are lots of ways he could have approached it. Here he looks at some of the possibilities, the advantages and disadvantages of each, and what he ultimately went with for Isotope.<\/em><\/p>\n<p><!--more--><\/p>\n<p>Consider <a href=\"https:\/\/www.youtube.com\/watch?v=lXnwNiqCjNM&#038;t=51s\" rel=\"noopener\">this cinematic Seinfeld moment<\/a>:<\/p>\n<p><iframe loading=\"lazy\" width=\"420\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/lXnwNiqCjNM?rel=0&#038;controls=0&#038;showinfo=0&#038;t=51s\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>The image of George running through a group of gulls stirs the emotions. The energy in his conviction is matched by the bursting energy of the birds. So how can we animate with this kind of energy?<\/p>\n<figure id=\"post-244446\" class=\"align-none media-244446\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/08\/george2.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>George Costanza running through birds<\/figcaption><\/figure>\n<p>Take another look at those gulls. It&#8217;s not that there&#8217;s a lot of them. The birds take flight individually. As each one flies, their numbers in grow, and the emotion lifts off with them. <em>Go get &#8217;em George!<\/em><\/p>\n<p>Instead of animating a group of items all at once, we can recreate this same effect by staggering the animations. When each item&#8217;s animation is incrementally delayed, they appear as individuals, but still move collectively as a whole. The result is captivating and feels more true to life.<\/p>\n<p>I recently released <a href=\"http:\/\/isotope.metafizzy.co\" rel=\"noopener\">Isotope v3 with new staggered item transitions<\/a>.<\/p>\n<p data-height=\"379\" style=\"height: 379px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"dark\" data-slug-hash=\"JKwXyY\" data-default-tab=\"result\" data-user=\"desandro\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/desandro\/pen\/JKwXyY\/\" rel=\"noopener\">Isotope &#8211; stagger<\/a> by David DeSandro (<a href=\"http:\/\/codepen.io\/desandro\" rel=\"noopener\">@desandro<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>While item transitions are easy to set up, they can be difficult to manage. Running multitudes of animations at different intervals gets complex. So let&#8217;s explore how to stagger item transitions.<\/p>\n<p>We&#8217;ll used a simple animation for our example: moving a group of items horizontally. Items have CSS <code>transition: transform 0.4s;<\/code>. They move by toggling <code>.is-moved<\/code> class. The first demo moves all the items at once.<\/p>\n<p data-height=\"265\" style=\"height: 265px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"7e8c3afff81acc27327e83c076ec9af6\" data-default-tab=\"result\" data-user=\"desandro\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/desandro\/pen\/7e8c3afff81acc27327e83c076ec9af6\/\" rel=\"noopener\">single transition<\/a> by David DeSandro (<a href=\"http:\/\/codepen.io\/desandro\" rel=\"noopener\">@desandro<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>setTimeout<\/h3>\n<p>We can use <code>setTimeout<\/code> to stagger triggering the transitions. <code>setTimeout<\/code> will start the transition later with a delay in JavaScript.<\/p>\n<p data-height=\"265\" style=\"height: 265px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"8e6354d41eeb4756741fb5d441a95fd6\" data-default-tab=\"result\" data-user=\"desandro\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/desandro\/pen\/8e6354d41eeb4756741fb5d441a95fd6\/\" rel=\"noopener\">setTimeout<\/a> by David DeSandro (<a href=\"http:\/\/codepen.io\/desandro\" rel=\"noopener\">@desandro<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>This actually looks pretty good. To fine tune the animation, I want the items to move without overlapping. So items on the right start moving first when moving to the right. Items on the left start moving first when moving to the left. We need to reverse the <code>setTimeout<\/code> delay if moving to the right.<\/p>\n<p data-height=\"265\" style=\"height: 265px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"4ee1a5d2c82e5a54d6d49d37968650ff\" data-default-tab=\"result\" data-user=\"desandro\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/desandro\/pen\/4ee1a5d2c82e5a54d6d49d37968650ff\/\" rel=\"noopener\">setTimeout, forward &#038; reversed<\/a> by David DeSandro (<a href=\"http:\/\/codepen.io\/desandro\" rel=\"noopener\">@desandro<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Not bad! But now comes the premier test of any animation system: <em>What happens when a change is triggered while animating?<\/em> This edge case is too often overlooked. Any novice developer can add an animation. But if you care about your users, your animations should react instantly when acted upon. Animations should not impede on your users actions.<\/p>\n<p>Try clicking the button while transitioning to see what happens.<\/p>\n<figure id=\"post-244448\" class=\"align-none media-244448\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/08\/start-stop1b.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>It works. All the items end up where they are supposed to. But I don&#8217;t like how it behaves. It looks like the items get confused. Also try the non-reversed demo.<\/p>\n<figure id=\"post-244449\" class=\"align-none media-244449\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/08\/start-stop2a.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>The forward\/reversed transition continues through all the items. This isn&#8217;t good. The animation is still happening after the user has already reversed their action.<\/p>\n<h3>transition-delay<\/h3>\n<p>Let&#8217;s try something else. We&#8217;re already using CSS transitions, so it makes sense to use <code>transition-delay<\/code>. This demo uses JavaScript to set the incremental <code>transition-delay<\/code> in JS (but you could also use CSS preprocessor logic if that&#8217;s your thing). The transition is triggered at the same time for all items, but their delay differs by their <code>transition-delay<\/code> value.<\/p>\n<p data-height=\"265\" style=\"height: 265px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"8feed691b52be65132ce9ff814593f7f\" data-default-tab=\"result\" data-user=\"desandro\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/desandro\/pen\/8feed691b52be65132ce9ff814593f7f\/\" rel=\"noopener\">transitionDelay<\/a> by David DeSandro (<a href=\"http:\/\/codepen.io\/desandro\" rel=\"noopener\">@desandro<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>We can reverse the delay, to have similar behavior moving left and right, just like the <code>setTimeout<\/code> demo.<\/p>\n<p data-height=\"265\" style=\"height: 265px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"e31adcd5b6cbd0157f8f9bf338b7eb23\" data-default-tab=\"result\" data-user=\"desandro\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/desandro\/pen\/e31adcd5b6cbd0157f8f9bf338b7eb23\/\" rel=\"noopener\">transitionDelay, forward &#038; reversed<\/a> by David DeSandro (<a href=\"http:\/\/codepen.io\/desandro\" rel=\"noopener\">@desandro<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>As for start-stopping, this <code>transition-delay<\/code> demo behaves differently. The forward\/reversed demo stops in place for moment.<\/p>\n<figure id=\"post-244450\" class=\"align-none media-244450\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/08\/start-stop3a.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>This could work, but its behavior still isn&#8217;t ideal.<\/p>\n<h3>Frame-based animation<\/h3>\n<p>There&#8217;s one more method to try out: frame-based animation. Using <code>requestAnimationFrame<\/code> allows us to have control of how each transition is triggered, when it is triggered.<\/p>\n<p data-height=\"265\" style=\"height: 265px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"fb94678bfcdbc09c2af15179810ae4b7\" data-default-tab=\"result\" data-user=\"desandro\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/desandro\/pen\/fb94678bfcdbc09c2af15179810ae4b7\/\" rel=\"noopener\">frame animation<\/a> by David DeSandro (<a href=\"http:\/\/codepen.io\/desandro\" rel=\"noopener\">@desandro<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>It&#8217;s got perfect behavior. Start-stopping reverses the animation right where it is, so there is no delay and no excess transitions. But this nice result comes at the cost of complexity. This demo requires double the amount of JavaScript, with an animation loop that has to run every frame.<\/p>\n<hr>\n<p>So if you want to stagger animation, you&#8217;ve got options.<\/p>\n<ul>\n<li><code>setTimeout<\/code> will work, but is hard to cancel.<\/li>\n<li><code>transition-delay<\/code> will work, but might have delays.<\/li>\n<li><code>requestAnimationFrame<\/code> will work, but requires more JavaScript.<\/li>\n<\/ul>\n<p>And there are lots more solutions out there: CSS animations, jQuery <code>.animate()<\/code>, GreenSock, D3, yada, yada, yada. All these solutions can be used for staggering animations. But I encourage you to investigate how well they hold up to edge cases when user actions occur during the animation.<\/p>\n<p>Working on <a href=\"http:\/\/isotope.metafizzy.co\" rel=\"noopener\">Isotope<\/a>, I chose to use the <code>transition-delay<\/code> technique. It provided the best level of control, without too much complexity. Now Isotope users can add the final level of polish to their UI and take their experiences to new levels. Like a Costanza chasing his dreams.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following is a guest post by David DeSandro. David wanted to offer a new feature in Isotope: staggered animations. Like so many things web, there are lots of ways he could have approached it. Here he looks at some of the possibilities, the advantages and disadvantages of each, and what he ultimately went with [&hellip;]<\/p>\n","protected":false},"author":248326,"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":[612,816,432,815],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":162167,"url":"https:\/\/css-tricks.com\/draggable-elements-push-others-way\/","url_meta":{"origin":244442,"position":0},"title":"Draggable Elements That Push Others Out Of Way","date":"February 7, 2014","format":false,"excerpt":"Aside from a few esoteric tricks involving stuff like the resize handle on textareas, draggable elements is JavaScript territory on the web. E.g. click on element, hold down mouse button, drag mouse cursor, element drags with the mouse, release mouse button to release element. Or the touch equivalents. Fortunately this\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7974,"url":"https:\/\/css-tricks.com\/formatting-css3\/","url_meta":{"origin":244442,"position":1},"title":"Formatting CSS3","date":"December 1, 2010","format":false,"excerpt":"With all the vendor prefixes and all the new complex properties like animations and gradients, it's nice to format them so they are nicely readable. I agree with David DeSandro here that lining up the values makes for nice lookin' CSS. It would be cool if one of the \"CSS\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":208124,"url":"https:\/\/css-tricks.com\/lets-talk-about-the-web-animations-api\/","url_meta":{"origin":244442,"position":2},"title":"Let\u2019s talk about the Web Animations API","date":"September 13, 2015","format":false,"excerpt":"Dan Wilson has an intro article followed by a 5-part series all about the Web Animations API. If you were unaware, .animate() is a native thing now. I think there is a ton of interesting things about the Web Animations API, like: Yet another great example of how a libraries\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":278653,"url":"https:\/\/css-tricks.com\/css-animations-and-transitions-in-email\/","url_meta":{"origin":244442,"position":3},"title":"CSS Animations and Transitions in Email","date":"November 15, 2018","format":false,"excerpt":"We don't generally think of CSS animations or transitions inside of email, or really any movement at all outside of an awkward occasional GIF. But there is really no reason you can't use them inside HTML emails, particularly if you do it in a progressive enhancement-friendly way. Like, you could\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/email-open-cloe.gif?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14690,"url":"https:\/\/css-tricks.com\/how-css-animations-work-on-sales-page-for-iphone-4s\/","url_meta":{"origin":244442,"position":4},"title":"How CSS Animations Work on Sales Page for iPhone 4S","date":"October 25, 2011","format":false,"excerpt":"Impressed by the CSS animations on the Apple 4S sales page? I am. John B. Hall makes it clear by showing a miniaturized version where we can see all the off-screen elements.","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":281058,"url":"https:\/\/css-tricks.com\/toggling-animations-on-and-off\/","url_meta":{"origin":244442,"position":5},"title":"Toggling Animations On and Off","date":"January 9, 2019","format":false,"excerpt":"A nicely detailed tutorial by Kirupa that gets into how you might provide a UI with persisted options that control whether animations run or not. The trick is custom properties that control the movement: body { --toggle: 0; --playState: \"paused\"; } Which are used within animations and transitions: .animation {\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/smiley-circle.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244442"}],"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\/248326"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=244442"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244442\/revisions"}],"predecessor-version":[{"id":244580,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244442\/revisions\/244580"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=244442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=244442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=244442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}