{"id":283132,"date":"2019-02-22T10:36:41","date_gmt":"2019-02-22T17:36:41","guid":{"rendered":"http:\/\/css-tricks.com\/?p=283132"},"modified":"2019-02-22T23:19:11","modified_gmt":"2019-02-23T06:19:11","slug":"writing-animations-that-bring-your-site-to-life","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/writing-animations-that-bring-your-site-to-life\/","title":{"rendered":"Writing Animations That Bring Your Site to Life"},"content":{"rendered":"<p>Web animation is one of the factors that can strongly enhance your website\u2019s look and feel. Sadly, unlike mobile apps, there aren\u2019t as many websites using animation to their benefit as you would think. We don\u2019t want to count yours among those, so this article is for you and anyone else looking for ways to use animation for a better user experience! Specifically, we\u2019re going to learn how to make web interactions delightful using CSS animations. <\/p>\n<p><!--more--><\/p>\n<p>Here\u2019s what we\u2019re going to build together:<\/p>\n<figure><video controls src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/02\/demo.mov\"><\/video><\/figure>\n<div class=\"article-inline-buttons\">\n<a class=\"button button-left\" href=\"https:\/\/pb03.github.io\/css-animations-demo\/\" rel=\"noopener\">Live Demo<\/a> <a class=\"button\" href=\"https:\/\/github.com\/pb03\/css-animations-demo\" rel=\"noopener\">GitHub Repo<\/a>\n<\/div>\n<div class=\"inline-button-group\">\n<\/div>\n<hr \/>\n<p>Before we move ahead, it\u2019s worth mentioning that I\u2019m going to assume you have at least some familiarity with modern front-end frameworks and a basic understanding of CSS animations. If you don\u2019t, then no fear! CSS-Tricks has a great guides on <a href=\"https:\/\/css-tricks.com\/guides\/react\/\">React<\/a> and <a href=\"https:\/\/css-tricks.com\/guides\/react\/\">Vue<\/a>, as well as a thorough almanac post on the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/animation\/\">CSS<\/a> <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/animation\/\"><code>animation<\/code> property<\/a>.<\/p>\n<p>Good? OK, let\u2019s talk about <em>why<\/em> we\u2019d want to use animation in the first place and cover some baseline information about CSS animations.<\/p>\n<h3>Why would we to animate anything?<\/h3>\n<p>We could probably do an entire post on this topic alone. Oh, wait! <a href=\"https:\/\/css-tricks.com\/the-importance-of-context-shifting-in-ux-patterns\/\">Sarah Drasner already did that<\/a> and her points are both poignant and compelling.<\/p>\n<p>But, to sum things up based on my own experiences:<\/p>\n<ul>\n<li>Animations enhance the way users interact with an interface. For example, smart animations can reduce cognitive load by giving users better context between page transitions.<\/li>\n<li>They can provide clear cues to users, like where we want them to focus attention.<\/li>\n<li>Animations serve as another design pattern in and of themselves, helping users to get emotionally attached to and engage with the interface.<\/li>\n<li>Another benefit of using animations is that they can create a perception that a site or app loads faster than it actually does.<\/li>\n<\/ul>\n<h3>A couple of house rules with animations<\/h3>\n<p>Have you ever bumped into a site that animates <strong>all the things<\/strong>? Wow, those can be jarring. So, here\u2019s a couple of things to avoid when working with animations so our app doesn\u2019t fall into the same boat:<\/p>\n<ul>\n<li>Avoid animating CSS properties other than <code>transform<\/code> and <code>opacity<\/code>. If other properties have to be animated, like width or height, then make sure there aren\u2019t a lot of layout changes happening at the same time. There\u2019s actually a cost to animations and you can see exactly how much by referring to <a href=\"https:\/\/csstriggers.com\/\" rel=\"noopener\">CSS Triggers<\/a>.<\/li>\n<li>Also, just because animations can create perceived performance gains, there\u2019s actually a point of diminishing return when it comes to using them. Animating too many elements at the same time may result in decreased performance.<\/li>\n<\/ul>\n<p>Now we can get our hands dirty with some code!<\/p>\n<h3>Let\u2019s build a music app<\/h3>\n<p>We\u2019re going to build the music app we looked at earlier, which is inspired by <a href=\"https:\/\/dribbble.com\/shots\/5527602-Apple-Music-Smooth-floating\" rel=\"noopener\">Aur\u00e9lien Salomon\u2019s Dribbble shot<\/a>. I chose this example so that we can focus on animations, not only within a component, but also between different routes. We\u2019ll build this app using Vue and create animations using vanilla (i.e. no framework) CSS.<\/p>\n<p class=\"explanation\">Animations should go hand-in-hand with UI development. Creating UI before defining their movement is likely to cost much more time. In this case, the Dribbble shot provides that scope for us.<\/p>\n<p>Let\u2019s start with the development.<\/p>\n<h4>Step 1: Spin up the app locally<\/h4>\n<p>First things first. We need to set up a new Vue project. Again, we\u2019re assuming some base-level understanding of Vue here, so please check out the <a href=\"https:\/\/css-tricks.com\/guides\/vue\/\">Learning Vue guide<\/a> for more info on setting up.<\/p>\n<p>We need a couple of dependencies for our work, notably <code>vue-router<\/code> for transitioning between views and <code>sass-loader<\/code> so we can write in Sass and compile to CSS. Here\u2019s a detailed <a href=\"https:\/\/css-tricks.com\/build-a-custom-vue-router\/\">tutorial on using routes<\/a> and Sass can be installed by pointing the command line at the project directory and using <code>npm install -D sass-loader node-sass<\/code>.<\/p>\n<p>We have what we need!<\/p>\n<h4>Step 2: Setting up routes<\/h4>\n<p>For creating routes, we\u2019re first going to create two bare minimum components \u2014 <code>Artists.vue<\/code> and <code>Tracks.vue<\/code>. We\u2019ll drop a new file in the <code>src<\/code> folder called <code>router.js<\/code> and add routes for these components as:<\/p>\n<pre rel=\"Javascript\"><code class=\"language-javascript\">import Vue from 'vue'\r\nimport Router from 'vue-router'\r\nimport Artists from '.\/components\/Artists.vue'\r\nimport Tracks from '.\/components\/Tracks.vue'\r\n\r\nVue.use(Router)\r\nexport default new Router({\r\n\tmode: 'history',\r\n\troutes: [\r\n\t\t{\r\n\t\t\tpath: '\/',\r\n\t\t\tname: 'artists',\r\n\t\t\tcomponent: Artists\r\n\t\t},\r\n\t\t{\r\n\t\t\tpath: '\/:id',\r\n\t\t\tname: 'tracks',\r\n\t\t\tcomponent: Tracks\r\n\t\t}\r\n\t]\r\n})<\/code><\/pre>\n<p>Import <code>router.js<\/code> into the <code>main.js<\/code> and inject it to the Vue instance. Lastly, replace the content of your <code>App.vue<\/code> by <code>&lt;router-view\/&gt;<\/code>.<\/p>\n<h4>Step 3: Create the components and content for the music app<\/h4>\n<p>We need two components that we\u2019ll transition between with animation. Those are going to be:<\/p>\n<ol>\n<li><code>Artists.vue<\/code>: a grid of artists<\/li>\n<li><code>Tracks.vue<\/code>: An artist image with a back button<\/li>\n<\/ol>\n<p>If you wanna jump ahead a bit, here are some assets to work with:<\/p>\n<ol>\n<li><a href=\"https:\/\/github.com\/pb03\/css-animations-demo\/raw\/reference-code\/assets.zip\" rel=\"noopener\">Images<\/a> and sample <a href=\"https:\/\/github.com\/pb03\/css-animations-demo\/tree\/reference-code\/data\" rel=\"noopener\">data<\/a> in JSON format.<\/li>\n<li><a href=\"https:\/\/github.com\/pb03\/css-animations-demo\/tree\/reference-code\/components\" rel=\"noopener\">Content<\/a> for the components<\/li>\n<\/ol>\n<p>When all is said and done, the two views will come out to something like this:<\/p>\n<figure id=\"post-283152\" class=\"align-left media-283152\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/music-app-screens.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>Artists.vue (left) and Tracks.vue (right)<\/figcaption><\/figure>\n<h4>Step 4: Animate!<\/h4>\n<p>Here we are, the part we\u2019ve really wanted to get to all this time. The most important animation in the app is transitioning from Artists to Tracks when clicking on an artist. It should feel seamless where clicking on an artist image puts that image in focus while transitioning from one view into the next. This is exactly the type of animation that we rarely see in apps but can drastically reduce cognitive load for users.<\/p>\n<p>To make sure we\u2019re all on the same page, we\u2019re going to refer to the first image in the sequence as the \u201cprevious\u201d image and the second one as the &#8220;current&#8221; image. Getting the effect down is relatively easy as long as we know the dimensions and position of the previous image in the transition. We can animate the current image by transforming it as per previous image.<\/p>\n<p>The formula that I\u2019m using is <code>transform: translate(x, y) scale(n)<\/code>, where <code>n<\/code> is equal to the size of previous image divided by the size of current image. Note that we can use a static value of <code>n<\/code> since the dimensions are fixed for all the images. For example, the image size in the Artists view is <code>190x190<\/code> and <code>240x240<\/code> in the Tracks view. Thus, we can replace <code>n<\/code> by <code>190\/240 = 0.791<\/code>. That means the transform value becomes <code>translate(x, y) scale(0.791)<\/code> in our equation.<\/p>\n<figure id=\"post-283153\" class=\"align-left media-283153\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/music-app-animation-diagram.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>Animating from Artists to Tracks<\/figcaption><\/figure>\n<p>Next thing is to find <code>x<\/code> and <code>y<\/code>. We can get these values though click event in the Artists view as:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">const {x, y} = event.target.getBoundingClientRect()<\/code><\/pre>\n<p>&#8230;and then send these values to the Tracks view, all while switching the route. Since we aren\u2019t using any state management library, the two components will communicate via their parent component, which is the top level component, <code>App.vue<\/code>. In <code>App.vue<\/code>, let\u2019s create a method that switches the route and sends the image info as params.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">gotoTracks(position, artistId) {\r\n\tthis.$router.push({\r\n\t\tname: 'tracks',\r\n\t\tparams: {\r\n\t\t\tid: artistId,\r\n\t\t\tposition: position\r\n\t\t}\r\n\t})\r\n}<\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/pb03\/css-animations-demo\/blob\/reference-code\/App.vue\" rel=\"noopener\">Here\u2019s the relevant code<\/a> from the repo to reference, in case you\u2019re interested.<\/p>\n<p>Since we have received the position and ID of the image in Tracks, we have all the required data to show and animate it. We\u2019ll first fetch artist information (specifically the name and image URL) using artist ID.<\/p>\n<p>To animate the image, we need to calculate the  <code>transform<\/code>  value from the image\u2019s starting position. To set the <code>transform<\/code> value, I\u2019m using CSS custom properties, which can be done with CSS-in-JS techniques as well. Note that the image\u2019s position that we received through props will be relative to window. Therefore we\u2019ll have to subtract some fixed offset caused by the padding of the container <code>&lt;div&gt;<\/code> to even out our math.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">const { x, y } = this.$route.params.position\r\n\/\/ padding-left\r\nconst offsetLeft = 100\r\n\/\/ padding-top\r\nconst offsetTop = 30\r\n\r\n\/\/ Set CSS custom property value\r\ndocument.documentElement.style.setProperty(\r\n\t'--translate', \r\n\t`translate(${x - offsetLeft}px, ${y - offsetTop}px) scale(0.792)`\r\n)<\/code><\/pre>\n<p>We\u2019ll use this value to create a keyframe animation to move the image:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">@keyframes move-image {\r\n\tfrom {\r\n\t\ttransform: var(--translate);\r\n\t}\r\n}<\/code><\/pre>\n<p>This gets assigned to the CSS animation:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">.image {\r\n\tanimation: move-image 0.6s;\r\n}<\/code><\/pre>\n<p>&#8230;and it will animate the image from this transform value to its original position on component load.<\/p>\n<figure id=\"post-283154\" class=\"align-left media-283154\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/s_D931AB62E1E68F47894D0A090E9501B59CC83182583371FA7209E5A460E13D9D_1548265695511_1.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>Transitioning from Artists to Tracks<\/figcaption><\/figure>\n<p>We can use the same technique when going the opposite direction, Tracks to Artists. As we already have the clicked image\u2019s position stored in the parent component, we can pass it to props for Artists as well.<\/p>\n<figure id=\"post-283155\" class=\"align-left media-283155\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/s_D931AB62E1E68F47894D0A090E9501B59CC83182583371FA7209E5A460E13D9D_1548265710457_2.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>Transitioning from Tracks to Artists<\/figcaption><\/figure>\n<h4>Step 5: Show the tracks!<\/h4>\n<p>It\u2019s great that we can now move between our two views seamlessly, but the Tracks view is pretty sparse at the moment. So let\u2019s add the track list for the selected artist.<\/p>\n<p>We\u2019ll create an empty white box and a new keyframe to slide it upwards on page load. Then we\u2019ll add three subsections to it: Recent Tracks, Popular Tracks, and Playlist. Again, if you want to jump ahead, feel free to either <a href=\"https:\/\/github.com\/pb03\/css-animations-demo\/blob\/reference-code\/components\/Tracks--full.vue\" rel=\"noopener\">reference or copy the final code<\/a> from the repo.<\/p>\n<figure id=\"post-283156\" class=\"align-left media-283156\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/music-app-tracks-content.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>The Tracks view with content<\/figcaption><\/figure>\n<p>Recent Tracks is the row of thumbnails just below the artist image where each thumbnail includes the track name and track length below it. Since we\u2019re covering animations here, we\u2019ll create a scale-up animation, where the image starts invisible (<code>opacity: 0<\/code>) and a little smaller than it\u2019s natural size (<code>scale(0.7)<\/code>), then is revealed (<code>opacity: 1<\/code> )and scales up to its natural size (<code>transform: none<\/code>).<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">.track {\r\n\topacity: 0;\r\n\ttransform: scale(0.7);\r\n\tanimation: scale-up 1s ease forwards;\r\n}\r\n\r\n@keyframes scale-up {\r\n\tto {\r\n\t\topacity: 1;\r\n\t\ttransform: none;\r\n\t}\r\n}<\/code><\/pre>\n<p>The Popular Tracks list and Playlist sit side-by-side below the Recent Tracks, where Popular tracks takes up most of the space. We can slide them up a bit on initial view with another set of keyframes:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">.track {\r\n\t...\r\n\tanimation: slide-up 1.5s;\r\n}\r\n\r\n@keyframes slide-up {\r\n\tfrom {\r\n\t\ttransform: translateY(140px);\r\n\t}\r\n}<\/code><\/pre>\n<p>To make the animation feel more natural, we\u2019ll create a stagger effect by adding an incremental animation delay to each item.<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">@for $i from 1 to 5 {\r\n\t&amp;:nth-child(#{$i + 1}) {\r\n\t\tanimation-delay: #{$i * 0.05}s;\r\n\t}\r\n}<\/code><\/pre>\n<p class=\u201dexplanation\u201d>The code above is basically looking for each child element, then adding a 0.05 second delay to each element it finds. So, for example, the first child gets a 0.05 second delay, the second child gets a 0.10 second delay and so on.<\/p>\n<p>Check out how nice and natural this all looks:<\/p>\n<figure><video controls src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/02\/content.mov\"><\/video><\/figure>\n<h3>Bonus: micro-interactions!<\/h3>\n<p>One of the fun things about working with animations is thinking through the small details because they\u2019re what tie things together and add delight to the user experience. We call these micro-interactions and they serve a good purpose by providing visual feedback when an action is performed.<\/p>\n<p>Depending on the complexity of the animations, we might need a library like <a href=\"https:\/\/animejs.com\/\" rel=\"noopener\">anime.js<\/a> or <a href=\"https:\/\/greensock.com\/gsap\" rel=\"noopener\">GSAP<\/a>. This example is pretty straightforward, so we can accomplish everything we need by writing some CSS.<\/p>\n<h4>First micro-interaction: The volume icon<\/h4>\n<p>Let\u2019s first get a volume icon in SVG format (<a href=\"https:\/\/thenounproject.com\/search\/?q=heart\" rel=\"noopener\">Noun Project<\/a> and <a href=\"https:\/\/material.io\/tools\/icons\/?icon=favorite&#038;style=baseline\" rel=\"noopener\">Material Design<\/a> are good sources). On click, we\u2019ll animate-in and out its <code>path<\/code> element to show the level of volume. For this, we\u2019ll create a method which switches its CSS class according to the volume level.<\/p>\n<pre rel=\"HMTL\"><code class=\"language-html\">&lt;svg @click=\"changeVolume\"&gt;\r\n\t&lt;g :class=\"`level-${volumeLevel}`\"&gt;\r\n\t\t&lt;path d=\"...\"\/&gt; &lt;!-- volume level 1 --&gt;\r\n\t\t&lt;path d=\"...\"\/&gt; &lt;!-- volume level 2 --&gt;\r\n\t\t&lt;path d=\"...\"\/&gt; &lt;!-- volume level 3 --&gt;\r\n\t\t&lt;polygon points=\"...\"\/&gt;\r\n\t&lt;\/g&gt;\r\n&lt;\/svg&gt;<\/code><\/pre>\n<p>Based on this class, we can show and hide certain <code>path<\/code> elements as:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">path {\r\n\topacity: 0;\r\n\ttransform-origin: left;\r\n\ttransform: translateX(-5px) scale(0.6);\r\n\ttransition: transform 0.25s, opacity 0.2s;\r\n}\r\n\r\n.level-1 path:first-child,\r\n.level-2 path:first-child,\r\n.level-2 path:nth-child(2),\r\n.level-3 path {\r\n\topacity: 1;\r\n\ttransform: none;\r\n}<\/code><\/pre>\n<figure id=\"post-283158\" class=\"align-left media-283158\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/music-app-volume.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>The animated volume control<\/figcaption><\/figure>\n<h4>Second micro-interaction: The favorite icon<\/h4>\n<p>Do you like it when you click on Twitter\u2019s heart button? That\u2019s because it feels unique and special by the way it animates on click. We\u2019ll make something similar but real quick. For this, we first get an SVG heart icon and add it to the the markup. Then we\u2019ll add a bouncy animation to it that\u2019s triggered on click.<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">@keyframes bounce {\r\n\t0%, 100% {\r\n\t\ttransform: none;\r\n\t}\r\n\t30% {\r\n\t\ttransform: scale(1.3);\r\n\t}\r\n\t60% {\r\n\t\ttransform: scale(0.9);\r\n\t}\r\n}<\/code><\/pre>\n<p>Another fun thing we can do is add other small heart icons around it with random sizes and positions. Ideally, we\u2019d add a few <code>absolute<\/code>-positioned HTML elements that a heart as the background. Let\u2019s Arrange each of them as below by setting their <code>left<\/code>  and <code>bottom<\/code> values.<\/p>\n<p>We\u2019ll also include a fade away effect so the icons appear to dissolve as they move upward by adding a keyframe animation on the same click event.<\/p>\n<pre rel=\"SCSS\"><code class=\"language-scss\">@keyframes float-upwards {\r\n\t0%, 100% {\r\n\t\topacity: 0;\r\n\t}\r\n\t50% {\r\n\t\topacity: 0.7;\r\n\t}\r\n\t50%, 100% {\r\n\t\ttransform: translate(-1px, -5px);\r\n\t}\r\n}<\/code><\/pre>\n<figure id=\"post-283159\" class=\"align-left media-283159\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/music-app-favorite.gif?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>The animated favorite button<\/figcaption><\/figure>\n<h3>Summing up<\/h3>\n<p>That\u2019s all! I hope you find all this motivating to try animations on your own websites and projects.<\/p>\n<p>While writing this, I also wanted to expand on the fundamental animation principles we glossed over earlier because I believe that they help choose animation durations, and avoid non-meaningful animations. That\u2019s important to discuss because doing animations <strong>correctly<\/strong> is better than doing them at all. But this sounds like a whole another topic to be covered in a future article.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web animation is one of the factors that can strongly enhance your website\u2019s look and feel. Sadly, unlike mobile apps, there aren\u2019t as many websites using animation to their benefit as you would think. We don\u2019t want to count yours among those, so this article is for you and anyone else looking for ways to [&hellip;]<\/p>\n","protected":false},"author":257922,"featured_media":283390,"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":"\u2728Writing Animations That Bring Your Site to Life \u2728","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[708,932],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/feat-1.png?fit=2880%2C1594&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283132"}],"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\/257922"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=283132"}],"version-history":[{"count":14,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283132\/revisions"}],"predecessor-version":[{"id":283512,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/283132\/revisions\/283512"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/283390"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=283132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=283132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=283132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}