{"id":935,"date":"2025-05-21T08:00:00","date_gmt":"2025-05-21T08:00:00","guid":{"rendered":"http:\/\/www.computercoursesonline.com\/?p=935"},"modified":"2025-06-05T21:14:54","modified_gmt":"2025-06-05T21:14:54","slug":"smashing-animations-part-3-smils-not-dead-baby-smils-not-dead","status":"publish","type":"post","link":"http:\/\/www.computercoursesonline.com\/index.php\/2025\/05\/21\/smashing-animations-part-3-smils-not-dead-baby-smils-not-dead\/","title":{"rendered":"Smashing Animations Part 3:\u00a0SMIL\u2019s\u00a0Not\u00a0Dead\u00a0Baby, SMIL\u2019s\u00a0Not\u00a0Dead"},"content":{"rendered":"<p>              <title>Smashing Animations Part 3:\u00a0SMIL\u2019s\u00a0Not\u00a0Dead\u00a0Baby, SMIL\u2019s\u00a0Not\u00a0Dead<\/title><\/p>\n<article>\n<header>\n<h1>Smashing Animations Part 3:\u00a0SMIL\u2019s\u00a0Not\u00a0Dead\u00a0Baby, SMIL\u2019s\u00a0Not\u00a0Dead<\/h1>\n<address>Andy Clarke<\/address>\n<p>                  2025-05-21T08:00:00+00:00<br \/>\n                  2025-06-05T21:02:28+00:00<br \/>\n                <\/header>\n<p>The SMIL specification was introduced by the W3C in 1998 for synchronizing multimedia. This was long before CSS animations or JavaScript-based animation libraries were available. It was built into SVG 1.1, which is why we can still use it there today.<\/p>\n<p>Now, you might\u2019ve heard that <a href=\"https:\/\/css-tricks.com\/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features\">SMIL is dead<\/a>. However, it\u2019s alive and well since Google reversed a decision to deprecate the technology almost a decade ago. It remains a terrific choice for designers and developers who want simple, semantic ways to add animations to their designs.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/1-yogi-bear-show.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"540\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"The Yogi Bear Show illustration\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/1-yogi-bear-show.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show \u00a9 Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/1-yogi-bear-show.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><strong>Tip<\/strong>: <em>There\u2019s now a website where you can see all my <a href=\"https:\/\/stuffandnonsense.co.uk\/toon-titles\">Toon Titles<\/a>.<\/em><\/p>\n<div class=\"refs\">\n<ul>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2025\/05\/smashing-animations-part-1-classic-cartoons-inspire-css\/\">Smashing Animations Part 1: How Classic Cartoons Inspire Modern CSS<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2025\/05\/smashing-animations-part-2-css-masking-add-extra-dimension\/\">Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension<\/a><\/li>\n<\/ul>\n<\/div>\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=\"introducing-mike-worth\">Introducing Mike Worth<\/h2>\n<p>I\u2019ve recently been working on a new website for Emmy-award-winning game composer Mike Worth. He hired me to create a bold, retro-style design that showcases his work. I used animations throughout to delight and surprise his audience as they move through his website.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/2-mike-worth-website.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"550\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Illustrations from Mike Worth\u2019s website\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/2-mike-worth-website.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Design by <a href=\"https:\/\/stuffandnonsense.co.uk\/\">Andy Clarke, Stuff &amp; Nonsense<\/a>. Mike Worth\u2019s website will launch in June 2025, but you can see <a href=\"https:\/\/codepen.io\/collection\/YwMKPb\">examples from this article on CodePen<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/2-mike-worth-website.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Mike loves \u201990s animation &mdash; especially <a href=\"https:\/\/en.wikipedia.org\/wiki\/DuckTales_(1987_TV_series)\">Disney\u2019s<\/a> <a href=\"https:\/\/en.wikipedia.org\/wiki\/DuckTales_(1987_TV_series)\"><em>Duck Tales<\/em><\/a>. Unsurprisingly, my taste in cartoons stretches back a little further to <a href=\"https:\/\/en.wikipedia.org\/wiki\/Hanna-Barbera\">Hanna-Barbera<\/a> shows like Dastardly and Muttley in <em>Their Flying Machines<\/em>, <em>Scooby-Doo<\/em>, <em>The Perils of Penelope Pitstop<\/em>, <em>Wacky Races<\/em>, and, of course, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Yogi_Bear\"><em>The Yogi Bear Show<\/em><\/a>. So, to explain how this era of animation relates to SVG, I\u2019ll be adding SMIL animations in SVG to title cards from some classic Yogi Bear cartoons.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/3-yogi-bear-show.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"300\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"The Yogi Bear Show illustrations\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/3-yogi-bear-show.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show \u00a9 Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/3-yogi-bear-show.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Fundamentally, animation changes how an element looks and where it appears over time using a few basic techniques. That might be simply shifting an element up or down, left or right, to create the appearance of motion, like Yogi Bear moving across the screen.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/4-yogi-bear-title-card.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Yogi Bear title card design recreated by Andy Clarke\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/4-yogi-bear-title-card.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Yogi Bear title card design by Lawrence Goble (1958). Author\u2019s recreation. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/4-yogi-bear-title-card.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Rotating objects around a fixed point can create everything, from simple spinning effects to natural-looking movements of totally normal things, like a bear under a parachute falling from the sky.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/5-yogi-bear-title-card-design.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Yogi Bear title card recreated by Andy Clarke\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/5-yogi-bear-title-card-design.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Yogi Bear title card design by Lawrence Goble (1958). Author\u2019s recreation. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/5-yogi-bear-title-card-design.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Scaling makes an element grow, shrink, or stretch, which can add drama, create perspective, or simulate depth.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/6-yogi-bear-title-card.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Yogi Bear title card recreated by Andy Clarke\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/6-yogi-bear-title-card.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Yogi Bear title card design by Lawrence Goble (1958). Author\u2019s recreation. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/6-yogi-bear-title-card.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Changing colour and transitioning opacity can add atmosphere, create a mood, and enhance visual storytelling. Just these basic principles can create animations that attract attention and improve someone\u2019s experience using a design.<\/p>\n<p>These results are all achievable using CSS animations, but some SVG properties can\u2019t be animated using CSS. Luckily, we can do more &mdash; and have much more fun &mdash; using SMIL animations in SVG. We can combine complex animations, move objects along paths, and control when they start, stop, and everything in between.<\/p>\n<p>Animations can be embedded within any SVG element, including <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Tutorials\/SVG_from_scratch\/Basic_shapes\">primitive shapes<\/a> like circles, ellipses, and rectangles. They can also be encapsulated into groups, paths, and polygons:<\/p>\n<pre><code class=\"language-svg\">&lt;circle ...&gt;\n  &lt;animate&gt;...&lt;\/animate&gt;\n&lt;\/circle&gt;\n<\/code><\/pre>\n<p>Animations can also be defined outside an element, elsewhere in an SVG, and connected to it using an <code>xlink<\/code> attribute:<\/p>\n<pre><code class=\"language-svg\">&lt;g id=\"yogi\"&gt;...&lt;\/g&gt;\n  ...\n&lt;animate xlink:href=\"#yogi\"&gt;\u2026&lt;\/animate&gt;\n<\/code><\/pre>\n<h2 id=\"building-an-animation\">Building An Animation<\/h2>\n<p><code>&lt;animate&gt;<\/code> is just one of several animation elements in SVG. Together with an <code>attributeName<\/code> value, it enables animations based on one or more of an element\u2019s attributes.<\/p>\n<p>Most animation explanations start by moving a primitive shape, like this exciting circle:<\/p>\n<pre><code class=\"language-svg\">&lt;circle\n  r=\"50\"\n  cx=\"50\" \n  cy=\"50\" \n  fill=\"#062326\" \n  opacity=\"1\"\n\/&gt;\n<\/code><\/pre>\n<p>Using this <code>attributeName<\/code> property, I can define which of this circle\u2019s attributes I want to animate, which, in this example, is its <code>cx<\/code> (x-axis center point) position:<\/p>\n<pre><code class=\"language-svg\">&lt;circle ... &gt;\n  &lt;animate attributename=\"cx\"&gt;&lt;\/animate&gt;\n&lt;\/circle&gt;\n<\/code><\/pre>\n<p>On its own, this does precisely nothing until I define three more values. The <code>from<\/code> keyword specifies the circle\u2019s initial position, <code>to<\/code>, its final position, and the <code>dur<\/code>-ation between those two positions:<\/p>\n<pre><code class=\"language-svg\">&lt;circle ... &gt;\n  &lt;animate \n  attributename=\"cx\"\n  from=\"50\" \n  to=\"500\"\n  dur=\"1s\"&gt;\n  &lt;\/animate&gt;\n&lt;\/circle&gt;\n<\/code><\/pre>\n<p>If I want more precise control, I can replace <code>from<\/code> and <code>to<\/code> with a set of <code>values<\/code> separated by semicolons:<\/p>\n<pre><code class=\"language-svg\">&lt;circle ... &gt;\n  &lt;animate \n  attributename=\"cx\"\n  values=\"50; 250; 500; 250;\"\n  dur=\"1s\"&gt;\n  &lt;\/animate&gt;\n&lt;\/circle&gt;\n<\/code><\/pre>\n<p>Finally, I can define how many times the animation repeats (<code>repeatcount<\/code>) and even after what period that repeating should stop (<code>repeatdur<\/code>):<\/p>\n<pre><code class=\"language-svg\">&lt;circle ... &gt;\n  &lt;animate \n  attributename=\"cx\"\n  values=\"50; 250; 500; 250;\"\n  dur=\"1s\"\n  repeatcount=\"indefinite\"\n  repeatdur=\"180s\"&gt;\n&lt;\/circle&gt;\n<\/code><\/pre>\n<p>Most SVG elements have attributes that can be animated. This title card from 1959\u2019s <a href=\"https:\/\/yogibear.fandom.com\/wiki\/Brainy_Bear\">\u201cBrainy Bear\u201d episode<\/a> shows Yogi in a crazy scientist\u2018s brain experiment. Yogi\u2019s head is under the dome, and energy radiates around him.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/7-yogi-bear-show.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"540\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"The Yogi Bear Show illustration where Yogi\u2019s head is under the dome, and energy radiates around him\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/7-yogi-bear-show.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show \u00a9 Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/7-yogi-bear-show.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>To create the buzz around Yogi, my SVG includes three <code>path<\/code> elements, each with <code>opacity<\/code>, <code>stroke<\/code>, and <code>stroke-width<\/code> attributes, which can all be animated:<\/p>\n<pre><code class=\"language-svg\">&lt;path opacity=\"1\" stroke=\"#fff\" stroke-width=\"5\" ... \/&gt;\n<\/code><\/pre>\n<p>I animated each path\u2019s <code>opacity<\/code>, changing its value from <code>1<\/code> to <code>.5<\/code> and back again:<\/p>\n<pre><code class=\"language-svg\">&lt;path opacity=\"1\" ... &gt;\n  &lt;animate \n    attributename=\"opacity\"\n    values=\"1; .25; 1;\"\n    dur=\"1s\"\n    repeatcount=\"indefinite\"&gt;\n  &lt;\/animate&gt;\n&lt;\/path&gt;\n<\/code><\/pre>\n<p>Then, to radiate energy from Yogi, I specified when each animation should <code>begin<\/code>, using a different value for each <code>path<\/code>:<\/p>\n<pre><code class=\"language-svg\">&lt;path ... &gt;\n  &lt;animate begin=\"0\" \u2026 &gt;\n&lt;\/path&gt;\n\n&lt;path ... &gt;\n  &lt;animate begin=\".5s\" \u2026 &gt;\n&lt;\/path&gt;\n\n&lt;path ... &gt;\n  &lt;animate begin=\"1s\" \u2026 &gt;\n&lt;\/path&gt;\n<\/code><\/pre>\n<p>I\u2019ll explain more about the <code>begin<\/code> property and how to start animations after this short commercial break.<\/p>\n<p>Try this yourself:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"qEEzYgG\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Brainy Bear SVG animation [forked]](https:\/\/codepen.io\/smashingmag\/pen\/qEEzYgG) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/qEEzYgG\">Brainy Bear SVG animation [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<p>To make animations appear more natural, I can apply more than one <code>animate<\/code> element and give each one a different <code>attributename<\/code> value. Those paths also contain a <code>stroke-width<\/code> attribute, which I can also animate by changing the stroke widths between <code>5<\/code> and <code>7<\/code>:<\/p>\n<pre><code class=\"language-svg\">&lt;path ... &gt;\n  &lt;animate attributename=\"opacity\" ... &gt;&lt;\/animate&gt;\n  &lt;animate attributename=\"stroke-width\" ... &gt;&lt;\/animate&gt;\n&lt;\/path&gt;\n<\/code><\/pre>\n<p>Finally, I can animate the dome over Yogi\u2019s head, changing its <code>fill<\/code> colour between two values over five seconds to create the impression that the crazy scientist\u2019s machine is heating up:<\/p>\n<pre><code class=\"language-svg\">&lt;path fill=\"#50D9E0\" ... &gt;\n  &lt;animate\n    attributename=\"fill\"\n    values=\"#50D9E0; #E18C50;\"\n    dur=\"5s\"\n    begin=\"2s\"\n  &gt;\n&lt;\/path&gt;\n<\/code><\/pre>\n<p>Implement that code, and you\u2019ll soon notice that the dome returns to its original state after the animation is complete. To retain its colour at the end of the animation, I can add the &mdash; confusingly named &mdash; <code>fill<\/code> property and a value of <code>freeze.<\/code> This stops the animation in its final state and prevents it from returning to the original colour:<\/p>\n<pre><code class=\"language-svg\">&lt;path fill=\"#50D9E0\" ... &gt;\n  &lt;animate fill=\"freeze\"&gt;\n&lt;\/path&gt;\n<\/code><\/pre>\n<p>Animating attributes brings these title card designs to life, whether by adjusting the position of a primitive shape, its opacity, and stroke width or by creating complex sequences with staggered timing. But there\u2019s still more I can do, starting with the next animation element, <code>animateTransform<\/code>.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"animatetransform\"><code>animateTransform<\/code><\/h2>\n<p>If <code>&lt;animate&gt;<\/code> controls attributes, then <code>animateTransform<\/code> animates transformations, including rotations, scaling, skewing, and translations. It works by changing the values of a transform property, like this <code>translate<\/code>:<\/p>\n<pre><code class=\"language-svg\">&lt;path transform=\"translate(0,0)\"\/&gt;\n<\/code><\/pre>\n<p>Then, the animation works the same way as <code>&lt;animate&gt;<\/code>, adding an <code>attributename<\/code> and specifying the type of transform, in this example, <code>rotate:<\/code><\/p>\n<pre><code class=\"language-svg\">&lt;animatetransform \n  attributename=\"transform\"\n  type=\"rotate\"&gt;\n&lt;\/animatetransform&gt;\n<\/code><\/pre>\n<p>I can use either <code>from<\/code> and <code>to<\/code> or the <code>values<\/code> attribute to define how an element is transformed.<\/p>\n<ul>\n<li><strong>Scale<\/strong> uses <code>x<\/code> and <code>y<\/code> values  (<code>.5<\/code>, <code>1<\/code>).<\/li>\n<li><strong>Rotate<\/strong> uses degrees (<code>0<\/code>\u2013<code>360<\/code>) plus optional <code>x<\/code> and <code>y<\/code> (<code>360<\/code>, <code>0<\/code>, <code>0<\/code>).<\/li>\n<li><strong>Translate<\/strong> also uses <code>x<\/code> and <code>y<\/code> values  (<code>50<\/code>, <code>100<\/code>).<\/li>\n<li><strong>Skew<\/strong> uses <code>x<\/code> and <code>y<\/code> values, too (<code>50<\/code>, <code>100<\/code>).<\/li>\n<\/ul>\n<p>What\u2019s interesting about those values is that they can be added to an element\u2019s existing values instead of replacing them. For example, when an attribute contains a <code>translate<\/code> value of <code>100, 0<\/code>:<\/p>\n<pre><code class=\"language-svg\">&lt;path transform=\"translate(100, 0)\"\/&gt;\n<\/code><\/pre>\n<p>And then I animate that translation horizontally by <code>100<\/code>:<\/p>\n<pre><code class=\"language-svg\">&lt;animatetransform\n  attributename=\"transform\"\n  type=\"translate\"\n  from=\"0, 0\"\n  to=\"100, 0\"\n  additive=\"sum\"&gt;\n&lt;\/animatetransform&gt;\n<\/code><\/pre>\n<p>Using the <code>additive<\/code> property with a value of <code>sum<\/code>, the animation values are relative to the original, starting the animation at <code>100<\/code> and ending at <code>200<\/code> by adding <code>100<\/code> to <code>100<\/code>.<\/p>\n<p>Similarly, if I give the <code>accumulate<\/code> property a value of <code>sum<\/code>, each instance of animation will build on the last. So, in an animation where an element is translated by <code>100<\/code> and repeats five times, each movement will be cumulative, moving the element by <code>500<\/code>:<\/p>\n<pre><code class=\"language-svg\">&lt;animatetransform\n  attributename=\"transform\"\n  type=\"translate\"\n  from=\"0, 0\"\n  to=\"100, 0\"\n  additive=\"sum\"\n  accumulate=\"sum\" \n\/&gt;\n<\/code><\/pre>\n<p>This title card from 1958\u2019s Yogi Bear\u2019s <a href=\"https:\/\/yogibear.fandom.com\/wiki\/Yogi_Bear%27s_Big_Break\">\u201cBig Break\u201d episode<\/a> shows Yogi floating from the sky under a parachute.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/8-yogi-bear-show.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"540\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"The Yogi Bear Show illustration shows Yogi floating from the sky under a parachute\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/8-yogi-bear-show.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show \u00a9 Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/8-yogi-bear-show.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>I needed two types of transform animations to generate the effect of Yogi drifting gently downwards: <code>translate<\/code>, and <code>rotate<\/code>. I first added an <code>animatetransform<\/code> element to the group, which contains Yogi and his chute. I defined his initial vertical position &mdash; <code>1200<\/code> off the top of the <code>viewBox<\/code> &mdash; then translated his descent to <code>1000<\/code> over a 15-second duration:<\/p>\n<pre><code class=\"language-svg\">&lt;g transform=\"translate(1200, -1200)\"&gt;\n  ...\n  &lt;animateTransform\n    attributeName=\"transform\"\n    type=\"translate\"\n    values=\"500,-1200; 500,1000\"\n    dur=\"15s\"\n    repeatCount=\"1\" \n  \/&gt;\n&lt;\/g&gt;\n<\/code><\/pre>\n<p>Yogi appears to fall from the sky, but the movement looks unrealistic. So, I added a second <code>animatetransform<\/code> element, this time with an indefinitely repeating +\/- 5-degree rotation to swing Yogi from side to side during his descent:<\/p>\n<pre><code class=\"language-svg\">&lt;animateTransform\n  attributeName=\"transform\"\n  type=\"rotate\"\n  values=\"-5; 5; -5\"\n  dur=\"14s\"\n  repeatCount=\"indefinite\"\n  additive=\"sum\" \n\/&gt;\n<\/code><\/pre>\n<p>Try this yourself:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"PwwraNm\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Big Break SVG animation [forked]](https:\/\/codepen.io\/smashingmag\/pen\/PwwraNm) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/PwwraNm\">Big Break SVG animation [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<h2 id=\"starting-and-stopping\">Starting And Stopping<\/h2>\n<p>So far, every animation begins as soon as the page has loaded. But there are ways to not only delay the start of animation but define precisely where it begins, using the begin <code>property<\/code>:<\/p>\n<p>In this title card from 1959\u2019s <a href=\"https:\/\/yogibear.fandom.com\/wiki\/Robin_Hood_Yogi\">\u201cRobin Hood Yogi\u201d<\/a>, Yogi shoots an arrow into an apple on Boo-Boo\u2019s head.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/9-yogi-bear-show.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"540\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"The Yogi Bear Show illustration where Yogi shoots an arrow into an apple on Boo-Boo\u2019s head\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/9-yogi-bear-show.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show \u00a9 Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/9-yogi-bear-show.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>By default, the arrow is set loose when the page loads. Blink, and you might miss it. To build some anticipation, I can <code>begin<\/code> the animation two seconds later:<\/p>\n<pre><code class=\"language-svg\">&lt;animatetransform\n  attributename=\"transform\"\n  type=\"translate\"\n  from=\"0 0\"\n  to=\"750 0\"\n  dur=\".25s\"\n  begin=\"2s\"\n  fill=\"freeze\"\n\/&gt;\n<\/code><\/pre>\n<p>Or, I can let the viewer take the shot when they click the arrow:<\/p>\n<pre><code class=\"language-svg\">&lt;animatetransform\n  ...\n  begin=\"click\"\n\/&gt;\n<\/code><\/pre>\n<p>And I can combine the click event and a delay, all with no JavaScript, just a smattering of SMIL:<\/p>\n<pre><code class=\"language-svg\">&lt;animatetransform\n  ...\n  begin=\"click + .5s\"\n\/&gt;\n<\/code><\/pre>\n<p>Try this yourself by clicking the arrow:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"OPPeERj\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Robin Hood Yogi CSS animation [forked]](https:\/\/codepen.io\/smashingmag\/pen\/OPPeERj) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/OPPeERj\">Robin Hood Yogi CSS animation [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<h2 id=\"synchronising-animations\">Synchronising Animations<\/h2>\n<p>In his 1958 <a href=\"https:\/\/yogibear.fandom.com\/wiki\/Pie-Pirates\">\u201cPie-Pirates\u201d episode<\/a>, Yogi Bear tries to steal a pie and has to outwit a bulldog. The title card &mdash; designed by Lawrence Goble &mdash; shows the chase but, alas, (spoiler alert) no stolen pie.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/10-yogi-bear-show.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"540\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"The Yogi Bear Show illustration showing a bulldog chasing Yogi Bear\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/10-yogi-bear-show.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show \u00a9 Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/10-yogi-bear-show.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>To bring this title card to life, I needed two groups of paths: one for Yogi and the other for the dog. I translated them both off the left edge of the <code>viewBox<\/code>:<\/p>\n<pre><code class=\"language-svg\">&lt;g class=\"dog\" transform=\"translate(-1000, 0)\"&gt;\n  ...\n&lt;\/g&gt;\n\n&lt;g class=\"yogi\" transform=\"translate(-1000, 0)\"&gt;\n  ...\n&lt;\/g&gt;\n<\/code><\/pre>\n<p>Then, I applied an <code>animatetransform<\/code> element to both groups, which moves them back into view:<\/p>\n<pre><code class=\"language-svg\">&lt;!-- yogi --&gt;\n&lt;animateTransform\n  attributeName=\"transform\"\n  type=\"translate\"\n  from=\"-1000,0\"\n  to=\"0,0\"\n  dur=\"2s\"\n  fill=\"freeze\"\n\/&gt;\n\n&lt;!-- dog --&gt;\n&lt;animateTransform\n  attributeName=\"transform\"\n  type=\"translate\"\n  from=\"-1000,0\"\n  to=\"0,0\"\n  dur=\".5s\"\n  fill=\"freeze\"\n\/&gt;\n<\/code><\/pre>\n<p>This sets up the action, but the effect feels flat, so I added another pair of animations that bounce both characters:<\/p>\n<pre><code class=\"language-svg\">&lt;!-- yogi --&gt;\n&lt;animateTransform\n  attributeName=\"transform\"\n  type=\"rotate\"\n  values=\"-1,0,450; 1,0,450; -1,0,450\"\n  dur=\".25s\"\n  repeatCount=\"indefinite\"\n\/&gt;\n\n&lt;!-- dog --&gt;\n&lt;animateTransform\n  attributeName=\"transform\"\n  type=\"rotate\"\n  values=\"-1,0,450; 1,0,450; -1,0,450\"\n  dur=\"0.5s\"\n  repeatCount=\"indefinite\"\n\/&gt;\n<\/code><\/pre>\n<p>Animations can begin when a page loads, after a specified time, or when clicked. And by naming them, they can also synchronise with other animations.<\/p>\n<p>I wanted Yogi to enter the frame first to build anticipation, with a short pause before other animations begin, synchronising to the moment he\u2019s arrived. First, I added an ID to Yogi\u2019s <code>translate<\/code> animation:<\/p>\n<pre><code class=\"language-svg\">&lt;animateTransform\n  id=\"yogi\"\n  type=\"translate\"\n  ...\n\/&gt;\n<\/code><\/pre>\n<blockquote><p><strong>Watch out<\/strong>: For a reason, I can\u2019t, for the life of me, explain why Firefox won\u2019t begin animations with an ID when the ID contains a hyphen. This isn\u2019t smarter than the average browser, but replacing hyphens with underscores fixes the problem.<\/p><\/blockquote>\n<p>Then, I applied a <code>begin<\/code> to his <code>rotate<\/code> animation, which starts playing a half-second after the <code>#yogi<\/code> animation ends:<\/p>\n<pre><code class=\"language-svg\">&lt;animateTransform\n  type=\"rotate\"\n  begin=\"yogi.end + .5s\"\n  ...\n\/&gt;\n<\/code><\/pre>\n<p>I can build sophisticated sets of synchronised animations using the <code>begin<\/code> property and whether a named animation begins or ends. The bulldog chasing Yogi enters the frame two seconds after Yogi begins his entrance:<\/p>\n<pre><code class=\"language-svg\">&lt;animateTransform\n  id=\"dog\"\n  type=\"translate\"\n  begin=\"yogi.begin + 2s\"\n  fill=\"freeze\"\n  ...\n\/&gt;\n<\/code><\/pre>\n<p>One second after the dog has caught up with Yogi, a <code>rotate<\/code> transformation makes him bounce, too:<\/p>\n<pre><code class=\"language-svg\">&lt;animateTransform\n  type=\"rotate\"\n  ...\n  begin=\"dog.begin + 1s\"\n  repeatCount=\"indefinite\" \n\/&gt;\n<\/code><\/pre>\n<p>The background rectangles whizzing past are also synchronised, this time to one second before the bulldog ends his run:<\/p>\n<pre><code class=\"language-svg\">&lt;rect ...&gt;\n  &lt;animateTransform\n    begin=\"dog.end + -1s\"\n  \/&gt;\n&lt;\/rect&gt;\n<\/code><\/pre>\n<p>Try this yourself:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"LEEKryp\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Pie-Pirates SVG animation [forked]](https:\/\/codepen.io\/smashingmag\/pen\/LEEKryp) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/LEEKryp\">Pie-Pirates SVG animation [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<p>The timing of this background movement is synchronised with the dog arriving, which, in turn, is relative to Yogi\u2019s arrival, building a sequence of animations that all feel connected.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"animating-along-motion-paths\">Animating Along Motion Paths<\/h2>\n<p>Until now, all the animations in these title cards have been up, down, left, right, or one combination or another. But there\u2019s one more aspect of SMIL in SVG, which can add an extra dimension to animations: animating along motion paths using the <code>animatemotion<\/code> element.<\/p>\n<p><code>animatemotion<\/code> accepts all the same properties and values as <code>animate<\/code> and <code>animateTransform<\/code>, but adds a few more for finer control over direction and timing. <code>animatemotion<\/code> uses the <code>path<\/code> property to enable elements to move along a motion path. It also uses the <code>d<\/code> value for coordinate data in the same way as any conventional path.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/11-yogi-bear-show.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"540\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"The Yogi Bear Show illustration of the Runaway Bear\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/11-yogi-bear-show.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      The Yogi Bear Show \u00a9 Warner Bros. Entertainment Inc. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/11-yogi-bear-show.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In <a href=\"https:\/\/yogibear.fandom.com\/wiki\/The_Runaway_Bear\">\u201cThe Runaway Bear\u201d<\/a> from 1959, Yogi must avoid a hunter turning his head into a trophy. I wanted Yogi to leap in and out of the screen by making him follow a path. I also wanted to vary the speed of his dash: speeding up as he enters and exits, and slowing down as he passes the title text.<\/p>\n<p>I first added a <code>path<\/code> property, using its coordinate data to give Yogi a route to follow, and specified a two-second duration for my animation:<\/p>\n<pre><code class=\"language-svg\">&lt;g&gt;\n  &lt;animateMotion\n    dur=\"2s\"\n    path=\"...\"\n  &gt;\n  &lt;\/animateMotion&gt;\n&lt;\/g&gt;\n<\/code><\/pre>\n<p>Alternatively, I could add a <code>path<\/code> element, leave it visible, or prevent it from being rendered by placing it inside a <code>defs<\/code> element:<\/p>\n<pre><code class=\"language-svg\">&lt;defs&gt;\n  &lt;path id=\"yogi\" d=\"...\" \/&gt;\n&lt;\/defs&gt;\n<\/code><\/pre>\n<p>I can then reference that by using a <code>mpath<\/code> element inside my <code>animateMotion<\/code>:<\/p>\n<pre><code class=\"language-svg\">&lt;animateMotion\n  ...\n  &lt;mpath href=\"#yogi\" \/&gt;\n&lt;\/animateMotion&gt;\n<\/code><\/pre>\n<p>I experimented with several paths before settling on the one that delivered the movement shape I was looking for:<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/12-yogi-bear-title-card-recreations.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"450\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Several variants of the Yogi Bear title card recreated by Andy Clarke\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/12-yogi-bear-title-card-recreations.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Yogi Bear title card design by Lawrence Goble (1959.) Author\u2019s recreation. (<a href=\"https:\/\/files.smashing.media\/articles\/smashing-animations-part-3-smil-not-dead\/12-yogi-bear-title-card-recreations.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>One was too bouncy, one was too flat, but the third motion path was just right. Almost, as I also wanted to vary the speed of Yogi\u2019s dash: speeding him up as he enters and exits and slowing him down as he passes the title text.<\/p>\n<p>The <code>keyPoints<\/code> property enabled me to specify points along the motion path and then adjust the duration Yogi spends between them. To keep things simple, I defined five points between <code>0<\/code> and <code>1<\/code>:<\/p>\n<pre><code class=\"language-svg\">&lt;animateMotion\n  ...\n  keyPoints=\"0; .35; .5; .65; 1;\"\n&gt;\n&lt;\/animateMotion&gt;\n<\/code><\/pre>\n<p>Then I added the same number of <code>keyTimes<\/code> values, separated by semicolons, to control the pacing of this animation:<\/p>\n<pre><code class=\"language-svg\">&lt;animateMotion\n  ...\n  keyTimes=\"0; .1; .5; .95; 1;\"\n&gt;\n&lt;\/animateMotion&gt;\n<\/code><\/pre>\n<p>Now, Yogi rushes through the first three <code>keyPoints<\/code>, slows down as he passes the title text, then speeds up again as he exits the <code>viewBox<\/code>.<\/p>\n<p>Try this yourself:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"oggryox\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Runaway Bear SVG animation [forked]](https:\/\/codepen.io\/smashingmag\/pen\/oggryox) by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/oggryox\">Runaway Bear SVG animation [forked]<\/a> by <a href=\"https:\/\/codepen.io\/malarkey\">Andy Clarke<\/a>.<\/figcaption><\/figure>\n<h2 id=\"smil-s-not-dead-baby-smil-s-not-dead\">SMIL\u2019s Not Dead, Baby. SMIL\u2019s Not Dead<\/h2>\n<p>With their ability to control transformations, animate complex motion paths, and synchronise multiple animations, SMIL animations in SVG are still powerful tools. They can bring design to life without needing a framework or relying on JavaScript. It\u2019s compact, which makes it great for small SVG effects.<\/p>\n<p>SMIL includes the <code>begin<\/code> attribute, which makes chaining animations far more intuitive than with CSS. Plus, SMIL lives inside the SVG file, making it perfect for animations that travel with an asset. So, while SMIL is not modern by today\u2019s standards and may be a little bit niche, it can still be magical.<\/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=%0aDon%e2%80%99t%20let%20the%20misconception%20that%20SMIL%20is%20%e2%80%9cdead%e2%80%9d%20stop%20you%20from%20using%20this%20fantastic%20tool.%0a&amp;url=https:\/\/smashingmagazine.com%2f2025%2f05%2fsmashing-animations-part-3-smil-not-dead%2f\"><\/p>\n<p>Don\u2019t let the misconception that SMIL is \u201cdead\u201d stop you from using this fantastic tool.<\/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>Google reversed its decision to deprecate SMIL almost a decade ago, so it remains a terrific choice for designers and developers who want <strong>simple<\/strong>, <strong>semantic ways<\/strong> to add animations to their designs.<\/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>(yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Smashing Animations Part 3:\u00a0SMIL\u2019s\u00a0Not\u00a0Dead\u00a0Baby, SMIL\u2019s\u00a0Not\u00a0Dead Smashing Animations Part 3:\u00a0SMIL\u2019s\u00a0Not\u00a0Dead\u00a0Baby, SMIL\u2019s\u00a0Not\u00a0Dead Andy Clarke 2025-05-21T08:00:00+00:00 2025-06-05T21:02:28+00:00 The SMIL specification was introduced by the W3C in 1998 for synchronizing multimedia. This was long before CSS animations or JavaScript-based animation libraries were available. It was built into SVG 1.1, which is why we can still use it there today&#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":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/935"}],"collection":[{"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=935"}],"version-history":[{"count":1,"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/935\/revisions"}],"predecessor-version":[{"id":936,"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/posts\/935\/revisions\/936"}],"wp:attachment":[{"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/categories?post=935"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.computercoursesonline.com\/index.php\/wp-json\/wp\/v2\/tags?post=935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}