{"id":1072,"date":"2025-09-22T13:00:00","date_gmt":"2025-09-22T13:00:00","guid":{"rendered":"https:\/\/computercoursesonline.com\/?p=1072"},"modified":"2025-09-25T21:00:19","modified_gmt":"2025-09-25T21:00:19","slug":"ambient-animations-in-web-design-principles-and-implementation-part-1","status":"publish","type":"post","link":"https:\/\/computercoursesonline.com\/index.php\/2025\/09\/22\/ambient-animations-in-web-design-principles-and-implementation-part-1\/","title":{"rendered":"Ambient\u00a0Animations\u00a0In\u00a0Web Design: Principles And Implementation (Part\u00a01)"},"content":{"rendered":"<p>              <title>Ambient\u00a0Animations\u00a0In\u00a0Web Design: Principles And Implementation (Part\u00a01)<\/title><\/p>\n<article>\n<header>\n<h1>Ambient\u00a0Animations\u00a0In\u00a0Web Design: Principles And Implementation (Part\u00a01)<\/h1>\n<address>Andy Clarke<\/address>\n<p>                  2025-09-22T13:00:00+00:00<br \/>\n                  2025-09-25T20:32:54+00:00<br \/>\n                <\/header>\n<p>Unlike <em>timeline-based<\/em> animations, which tell stories across a sequence of events, or <em>interaction<\/em> animations that are triggered when someone touches something, <strong>ambient animations<\/strong> are the kind of passive movements you might not notice at first. But, they make a design look alive in subtle ways.<\/p>\n<p>In an ambient animation, elements might subtly transition between colours, move slowly, or gradually shift position. Elements can appear and disappear, change size, or they could rotate slowly.<\/p>\n<p>Ambient animations aren\u2019t intrusive; they don\u2019t demand attention, aren\u2019t distracting, and don\u2019t interfere with what someone\u2019s trying to achieve when they use a product or website. They can be playful, too, making someone smile when they catch sight of them. That way, ambient animations <strong>add depth to a brand\u2019s personality<\/strong>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/1-quick-draw-mcgraw-comic-book.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"399\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A three-page spread of a Quick Draw McGraw comic book including the animated cover and first two pages.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/1-quick-draw-mcgraw-comic-book.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Hanna-Barbera\u2019s Quick Draw McGraw \u00a9 Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/1-quick-draw-mcgraw-comic-book.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p class=\"c-pre-sidenote--left\">To illustrate the concept of ambient animations, I\u2019ve recreated the cover of a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Quick_Draw_McGraw\"><em>Quick Draw McGraw<\/em><\/a> <a href=\"https:\/\/dn720005.ca.archive.org\/0\/items\/QuickDrawMcGrawCharlton\/Quick%20Draw%20McGraw%20%233%20%28Charlton%201971%29.pdf\">comic book<\/a> (PDF) as a CSS\/SVG animation. The comic was published by Charlton Comics in 1971, and, being printed, these characters didn\u2019t move, making them ideal candidates to transform into ambient animations.<\/p>\n<p class=\"c-sidenote c-sidenote--right\"><strong>FYI<\/strong>: Original cover artist <a href=\"https:\/\/www.lambiek.net\/artists\/d\/dirgo_ray.htm\">Ray Dirgo<\/a> was best known for his work drawing Hanna-Barbera characters for Charlton Comics during the 1970s. Ray passed away in 2000 at the age of 92. He outlived Charlton Comics, which went out of business in 1986, and DC Comics acquired its characters.<\/p>\n<p><strong>Tip<\/strong>: You can view the complete ambient animation <a href=\"https:\/\/codepen.io\/malarkey\/pen\/NPGrWVy\">code on CodePen<\/a>.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/2-quick-draw-mcgraw-ambient-animations.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"484\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Quick Draw McGraw ambient animations.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/2-quick-draw-mcgraw-ambient-animations.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Quick Draw McGraw ambient animations. (<a href=\"https:\/\/codepen.io\/malarkey\/pen\/NPGrWVy\">Live Demo<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/2-quick-draw-mcgraw-ambient-animations.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"choosing-elements-to-animate\">Choosing Elements To Animate<\/h2>\n<p>Not everything on a page or in a graphic needs to move, and part of designing an ambient animation is <strong>knowing when to stop<\/strong>. The trick is to pick elements that lend themselves naturally to subtle movement, rather than forcing motion into places where it doesn\u2019t belong.<\/p>\n<h3 id=\"natural-motion-cues\">Natural Motion Cues<\/h3>\n<p>When I\u2019m deciding what to animate, I look for natural motion cues and think about when something would move naturally in the real world. I ask myself: <em>\u201cDoes this thing have weight?\u201d<\/em>, <em>\u201cIs it flexible?\u201d<\/em>, and <em>\u201cWould it move in real life?\u201d<\/em> If the answer\u2019s <em>\u201cyes,\u201d<\/em> it\u2019ll probably feel right if it moves. There are several motion cues in Ray Dirgo\u2019s cover artwork.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/3-pipe-feathers-toon-title-card.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"484\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Vibrantly illustrated pipe adorned with two feathers on the end against a silhouetted toon title card.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/3-pipe-feathers-toon-title-card.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Pipe and feathers swing slightly. (<a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/3-pipe-feathers-toon-title-card.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>For example, the peace pipe Quick Draw\u2019s puffing on has two feathers hanging from it. They swing slightly left and right by three degrees as the pipe moves, just like real feathers would.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">&#035;quick-draw-pipe {\n  animation: quick-draw-pipe-rotate 6s ease-in-out infinite alternate;\n}\n\n@keyframes quick-draw-pipe-rotate {\n  0% { transform: rotate(3deg); }\n  100% { transform: rotate(-3deg); }\n}\n\n&#035;quick-draw-feather-1 {\n  animation: quick-draw-feather-1-rotate 3s ease-in-out infinite alternate;\n}\n\n&#035;quick-draw-feather-2 {\n  animation: quick-draw-feather-2-rotate 3s ease-in-out infinite alternate;\n}\n\n@keyframes quick-draw-feather-1-rotate {\n  0% { transform: rotate(3deg); }\n  100% { transform: rotate(-3deg); }\n}\n\n@keyframes quick-draw-feather-2-rotate {\n  0% { transform: rotate(-3deg); }\n  100% { transform: rotate(3deg); }\n}\n<\/code><\/pre>\n<\/div>\n<h3 id=\"atmosphere-not-action\">Atmosphere, Not Action<\/h3>\n<p>I often choose elements or decorative details that add to the vibe but don\u2019t fight for attention.<\/p>\n<blockquote class=\"pull-quote\">\n<p>\n    <a class=\"pull-quote__link\" aria-label=\"Share on Twitter\" href=\"https:\/\/twitter.com\/share?text=%0aAmbient%20animations%20aren%e2%80%99t%20about%20signalling%20to%20someone%20where%20they%20should%20look;%20they%e2%80%99re%20about%20creating%20a%20mood.%20%0a&amp;url=https:\/\/smashingmagazine.com%2f2025%2f09%2fambient-animations-web-design-principles-implementation%2f\"><\/p>\n<p>Ambient animations aren\u2019t about signalling to someone where they should look; they\u2019re about creating a mood. <\/p>\n<p>    <\/a>\n  <\/p>\n<div class=\"pull-quote__quotation\">\n<div class=\"pull-quote__bg\">\n      <span class=\"pull-quote__symbol\">\u201c<\/span><\/div>\n<\/p><\/div>\n<\/blockquote>\n<p>Here, the chief slowly and subtly rises and falls as he puffs on his pipe.<\/p>\n<pre><code class=\"language-css\">&#035;chief {\n  animation: chief-rise-fall 3s ease-in-out infinite alternate;\n}\n\n@keyframes chief-group-rise-fall {\n  0% { transform: translateY(0); }\n  100% { transform: translateY(-20px); }\n}\n<\/code><\/pre>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/4-chief-toon-title-card.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"484\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"An illustrated Indian chief seated and puffing on a pipe against a silhouetted toon title card.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/4-chief-toon-title-card.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The chief rises and falls as he puffs on his pipe. (<a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/4-chief-toon-title-card.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>For added effect, the feather on his head also moves in time with his rise and fall:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">&#035;chief-feather-1 {\n  animation: chief-feather-1-rotate 3s ease-in-out infinite alternate;\n}\n\n&#035;chief-feather-2 {\n  animation: chief-feather-2-rotate 3s ease-in-out infinite alternate;\n}\n\n@keyframes chief-feather-1-rotate {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(-9deg); }\n}\n\n@keyframes chief-feather-2-rotate {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(9deg); }\n}\n<\/code><\/pre>\n<\/div>\n<h3 id=\"playfulness-and-fun\">Playfulness And Fun<\/h3>\n<p>One of the things I love most about ambient animations is how they bring fun into a design. They\u2019re an opportunity to <strong>demonstrate personality<\/strong> through playful details that make people smile when they notice them.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/5-closeup-illustrated-chief-head.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"484\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Closeup of the illustrated chief\u2019s head and face.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/5-closeup-illustrated-chief-head.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The chief\u2019s eyebrows rise and fall, and his eyes cross. (<a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/5-closeup-illustrated-chief-head.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Take a closer look at the chief, and you might spot his eyebrows raising and his eyes crossing as he puffs hard on his pipe. Quick Draw\u2019s eyebrows also bounce at what look like random intervals.<\/p>\n<pre><code class=\"language-css\">&#035;quick-draw-eyebrow {\n  animation: quick-draw-eyebrow-raise 5s ease-in-out infinite;\n}\n\n@keyframes quick-draw-eyebrow-raise {\n  0%, 20%, 60%, 100% { transform: translateY(0); }\n  10%, 50%, 80% { transform: translateY(-10px); }\n}\n<\/code><\/pre>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"keep-hierarchy-in-mind\">Keep Hierarchy In Mind<\/h2>\n<p>Motion draws the eye, and even subtle movements have a visual weight. So, I reserve the most obvious animations for elements that I need to create the biggest impact.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/6-illustrated-duick-draw-mcgraw.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"484\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Illustrated Quick Draw McGraw holding the feather-adorned pipe with dizzy eyes veering right.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/6-illustrated-duick-draw-mcgraw.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Quick Draw McGraw wobbles under the influence of his pipe. (<a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/6-illustrated-duick-draw-mcgraw.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Smoking his pipe clearly has a big effect on Quick Draw McGraw, so to demonstrate this, I wrapped his elements &mdash; including his pipe and its feathers &mdash; within a new SVG group, and then I made that wobble.<\/p>\n<pre><code class=\"language-css\">&#035;quick-draw-group {\n  animation: quick-draw-group-wobble 6s ease-in-out infinite;\n}\n\n@keyframes quick-draw-group-wobble {\n  0% { transform: rotate(0deg); }\n  15% { transform: rotate(2deg); }\n  30% { transform: rotate(-2deg); }\n  45% { transform: rotate(1deg); }\n  60% { transform: rotate(-1deg); }\n  75% { transform: rotate(0.5deg); }\n  100% { transform: rotate(0deg); }\n}\n<\/code><\/pre>\n<p>Then, to emphasise this motion, I mirrored those values to wobble his shadow:<\/p>\n<pre><code class=\"language-css\">&#035;quick-draw-shadow {\n  animation: quick-draw-shadow-wobble 6s ease-in-out infinite;\n}\n\n@keyframes quick-draw-shadow-wobble {\n  0% { transform: rotate(0deg); }\n  15% { transform: rotate(-2deg); }\n  30% { transform: rotate(2deg); }\n  45% { transform: rotate(-1deg); }\n  60% { transform: rotate(1deg); }\n  75% { transform: rotate(-0.5deg); }\n  100% { transform: rotate(0deg); }\n}\n<\/code><\/pre>\n<h2 id=\"apply-restraint\">Apply Restraint<\/h2>\n<p>Just because something can be animated doesn\u2019t mean it should be. When creating an ambient animation, I study the image and note the elements where subtle motion might add life. I keep in mind the questions: <em>\u201cWhat\u2019s the story I\u2019m telling? Where does movement help, and when might it become distracting?\u201d<\/em><\/p>\n<p>Remember, restraint isn\u2019t just about doing less; it\u2019s about doing the right things less often.<\/p>\n<h2 id=\"layering-svgs-for-export\">Layering SVGs For Export<\/h2>\n<p>In \u201c<a href=\"https:\/\/www.smashingmagazine.com\/2025\/06\/smashing-animations-part-4-optimising-svgs\/\">Smashing Animations Part 4: Optimising SVGs<\/a>,\u201d I wrote about the process I rely on to <em>\u201cprepare, optimise, and structure SVGs for animation.\u201d<\/em> When elements are crammed into a single SVG file, they can be a nightmare to navigate. Locating a specific path or group can feel like searching for a needle in a haystack.<\/p>\n<blockquote><p>That\u2019s why I develop my SVGs in layers, exporting and optimising one set of elements at a time &mdash; always in the order they\u2019ll appear in the final file. This lets me build the master SVG gradually by pasting it in each cleaned-up section.<\/p><\/blockquote>\n<p>I start by exporting background elements, optimising them, adding class and ID attributes, and pasting their code into my SVG file.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/7-toon-title-card.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"484\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"The toon title card with the chief and Quick Draw characters cut out with their shapes remaining.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/7-toon-title-card.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Exporting background elements. (<a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/7-toon-title-card.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Then, I export elements that often stay static or move as groups, like the chief and Quick Draw McGraw.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/8-quick-draw-pasted-toon-title-card.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"484\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Showing Quick Draw pasted to the toon title card\u2019s foreground, minus details including the pipe he is holding and his eyeballs.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/8-quick-draw-pasted-toon-title-card.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Exporting larger groups. (<a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/8-quick-draw-pasted-toon-title-card.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Before finally exporting, naming, and adding details, like Quick Draw\u2019s pipe, eyes, and his stoned sparkles.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/9-quick-draw-toon-title-card-details.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"484\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Showing Quick Draw in the same toon title card but including the details that were left out before.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/9-quick-draw-toon-title-card-details.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Adding details. (<a href=\"https:\/\/files.smashing.media\/articles\/ambient-animations-web-design-principles-implementation\/9-quick-draw-toon-title-card-details.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Since I export each layer from the same-sized artboard, I don\u2019t need to worry about alignment or positioning issues as they all slot into place automatically.<\/p>\n<h2 id=\"implementing-ambient-animations\">Implementing Ambient Animations<\/h2>\n<p>You don\u2019t need an animation framework or library to add ambient animations to a project. Most of the time, all you\u2019ll need is a well-prepared SVG and some thoughtful CSS.<\/p>\n<p>But, let\u2019s start with the SVG. The key is to group elements logically and give them meaningful class or ID attributes, which act as animation hooks in the CSS. For this animation, I gave every moving part its own identifier like <code>#quick-draw-tail<\/code> or <code>#chief-smoke-2<\/code>. That way, I could target exactly what I needed without digging through the DOM like a raccoon in a trash can.<\/p>\n<p>Once the SVG is set up, CSS does most of the work. I can use <code>@keyframes<\/code> for more expressive movement, or <code>animation-delay<\/code> to simulate randomness and stagger timings. The trick is to keep everything subtle and remember I\u2019m not animating for attention, I\u2019m animating for atmosphere.<\/p>\n<p>Remember that most ambient animations loop continuously, so they should be <strong>lightweight<\/strong> and <strong>performance-friendly<\/strong>. And of course, <a href=\"https:\/\/www.smashingmagazine.com\/2021\/10\/respecting-users-motion-preferences\/\">it\u2019s good practice to respect users who\u2019ve asked for less motion<\/a>. You can wrap your animations in an <code>@media prefers-reduced-motion<\/code> query so they only run when they\u2019re welcome.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">@media (prefers-reduced-motion: no-preference) {\n  &#035;quick-draw-shadow {\n    animation: quick-draw-shadow-wobble 6s ease-in-out infinite;\n  }\n}\n<\/code><\/pre>\n<\/div>\n<p>It\u2019s a small touch that\u2019s easy to implement, and it makes your designs more inclusive.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"ambient-animation-design-principles\">Ambient Animation Design Principles<\/h2>\n<p>If you want your animations to feel ambient, more like atmosphere than action, it helps to follow a few principles. These aren\u2019t hard and fast rules, but rather things I\u2019ve learned while animating smoke, sparkles, eyeballs, and eyebrows.<\/p>\n<h3 id=\"keep-animations-slow-and-smooth\">Keep Animations Slow And Smooth<\/h3>\n<p>Ambient animations should feel relaxed, so use <strong>longer durations<\/strong> and choose <strong>easing curves that feel organic<\/strong>. I often use <code>ease-in-out<\/code>, but <a href=\"https:\/\/www.smashingmagazine.com\/2022\/10\/advanced-animations-css\/\">cubic B\u00e9zier curves<\/a> can also be helpful when you want a more relaxed feel and the kind of movements you might find in nature.<\/p>\n<h3 id=\"loop-seamlessly-and-avoid-abrupt-changes\">Loop Seamlessly And Avoid Abrupt Changes<\/h3>\n<p>Hard resets or sudden jumps can ruin the mood, so if an animation loops, ensure it cycles smoothly. You can do this by <strong>matching start and end keyframes<\/strong>, or by setting the <code>animation-direction<\/code> to <code>alternate<\/code> the value so the animation plays forward, then back.<\/p>\n<h3 id=\"use-layering-to-build-complexity\">Use Layering To Build Complexity<\/h3>\n<p>A single animation might be boring. Five subtle animations, each on separate layers, can feel rich and alive. Think of it like building a sound mix &mdash; you want <strong>variation in rhythm, tone, and timing<\/strong>. In my animation, sparkles twinkle at varying intervals, smoke curls upward, feathers sway, and eyes boggle. Nothing dominates, and each motion plays its small part in the scene.<\/p>\n<h3 id=\"avoid-distractions\">Avoid Distractions<\/h3>\n<p>The point of an ambient animation is that it doesn\u2019t dominate. It\u2019s a <strong>background element<\/strong> and not a call to action. If someone\u2019s eyes are drawn to a raised eyebrow, it\u2019s probably too much, so dial back the animation until it feels like something you\u2019d only catch if you\u2019re really looking.<\/p>\n<h3 id=\"consider-accessibility-and-performance\">Consider Accessibility And Performance<\/h3>\n<p>Check <code>prefers-reduced-motion<\/code>, and don\u2019t assume everyone\u2019s device can handle complex animations. SVG and CSS are light, but things like blur filters and drop shadows, and complex CSS animations can still tax lower-powered devices. When an animation is purely decorative, consider adding <code>aria-hidden=&quot;true&quot;<\/code> to keep it from cluttering up the accessibility tree.<\/p>\n<h2 id=\"quick-on-the-draw\">Quick On The Draw<\/h2>\n<p>Ambient animation is like seasoning on a great dish. It\u2019s the pinch of salt you barely notice, but you\u2019d miss when it\u2019s gone. It doesn\u2019t shout, it whispers. It doesn\u2019t lead, it lingers. It\u2019s floating smoke, swaying feathers, and sparkles you catch in the corner of your eye. And when it\u2019s done well, ambient animation <strong>adds personality to a design without asking for applause<\/strong>.<\/p>\n<p>Now, I realise that not everyone needs to animate cartoon characters. So, in part two, I\u2019ll share how I created animations for several recent client projects. Until next time, if you\u2019re crafting an illustration or working with SVG, ask yourself: <strong>What would move if this were real?<\/strong> Then animate just that. Make it slow and soft. Keep it ambient.<\/p>\n<p>You can view the complete ambient animation <a href=\"https:\/\/codepen.io\/malarkey\/pen\/NPGrWVy\">code on CodePen<\/a>.<\/p>\n<div class=\"signature\">\n  <img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Ambient\u00a0Animations\u00a0In\u00a0Web Design: Principles And Implementation (Part\u00a01) Ambient\u00a0Animations\u00a0In\u00a0Web Design: Principles And Implementation (Part\u00a01) Andy Clarke 2025-09-22T13:00:00+00:00 2025-09-25T20:32:54+00:00 Unlike timeline-based animations, which tell stories across a sequence of events, or interaction animations that are triggered when someone touches something, ambient animations are the kind of passive movements you might not notice at first. But, they make a&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1072"}],"collection":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=1072"}],"version-history":[{"count":1,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1072\/revisions"}],"predecessor-version":[{"id":1073,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/1072\/revisions\/1073"}],"wp:attachment":[{"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=1072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/categories?post=1072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/tags?post=1072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}