{"id":7717,"date":"2015-08-28T12:37:31","date_gmt":"2015-08-28T19:37:31","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=7717"},"modified":"2020-04-29T16:03:40","modified_gmt":"2020-04-29T23:03:40","slug":"creating-a-fly-in-navigation","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/","title":{"rendered":"Animations &amp; Interactions in Design: Creating a Fading Navigation Menu"},"content":{"rendered":"<p>Arguably the most popular type of mobile navigation is the type that appears on demand: Tap an icon and site-wide links appear. But just making them suddenly appear is boring. It lacks panache. Great navigation has a hint of animation that gives the links context \u2014 they\u2019re not just things that appear out of nowhere. They\u2019re hidden just out of sight, ready to help users get around when the need arises.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/Nav-sample-2.gif\" alt=\"Fly-in navigation demo\" width=\"224\" height=\"450\"><\/p>\n<p>Today we\u2019re going to show you how to build a fading&nbsp;navigation that flies in and out on mobile without writing a single line of code that\u2019s sure to wow stakeholders.<\/p>\n<h3>1. Build the framework<\/h3>\n<p>Log in to your UXPin account (or start a <a href=\"https:\/\/www.uxpin.com\/\">free trial<\/a>) and let\u2019s get started. Then find and drag out the following elements:<\/p>\n<ul>\n<li>iPhone bezel, black<\/li>\n<li>FontAwesome \u201creorder\u201d icon<\/li>\n<li>FontAwesome \u201cremove\u201d icon<\/li>\n<li>Page title (36pt Rock Salt)<\/li>\n<li>Background image (in focus)<\/li>\n<li>Background image (blurred)<\/li>\n<\/ul>\n<p>We suggest you name each element as you create it \u2014 you\u2019ll thank yourself later. To do so, tap the \u201ci\u201d icon at the top of the options menu whenever you tap an icon.<\/p>\n<h3>2. Create the background<\/h3>\n<p>This prototype uses the background images in smart elements so we can reuse them later. Whether you choose to follow suit or not, drag in two versions of the background image: one in focus, and one blurred. Arrange them in the canvas so the in-focus image is on top of the blurred one. Finally, select the phone bezel and move it to the front.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11075\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/1-Set-up-background-take-4.gif\" alt=\"Set up background\" width=\"600\" height=\"374\"><\/p>\n<h3>3. Create the navigation links<\/h3>\n<p>Add navigation links (home, appetizers, entrees, etc). To add text to a box, double-click on its center and start typing.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11074\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/2-Create-nav-item-take-3.gif\" alt=\"Create nav item\" width=\"600\" height=\"349\"><\/p>\n<p>Color each box and add a little padding. Change the typeface and size as you see fit \u2014 in this demo we used 24px Maven Pro. You can make each link the same color, but in this demo we used:<\/p>\n<ul>\n<li>#cf1000<\/li>\n<li>#d82300<\/li>\n<li>#e43b00<\/li>\n<li>#f05301<\/li>\n<li>#fa6801<\/li>\n<\/ul>\n<h3>4. Finish the interface<\/h3>\n<p>Add the title (36pt Rock Salt, in this case) and the open-navigation \u201chamburger\u201d icon.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11073\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/3-Set-up-the-rest.png\" alt=\"Set up the rest\" width=\"1022\" height=\"591\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/3-Set-up-the-rest.png 1022w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/3-Set-up-the-rest-519x300.png 519w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/p>\n<p>Place the close-nav icon on top of the open-nav icon, then hide it with the layers palette.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11072\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/4-Add-and-hide-the-close-icon.gif\" alt=\"Add and hide the close icon\" width=\"600\" height=\"346\"><\/p>\n<p>Shrink the navigation links to fit under the phone bezel\u2019s right edge, and use the \u201ceye\u201d icons in the layers palette to hide them.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11071\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/5-Shrink-the-nav-items.gif\" alt=\"Shrink the nav items\" width=\"600\" height=\"347\"><\/p>\n<h3>5. Create an advanced animation<\/h3>\n<p>The fun begins with the <a href=\"https:\/\/www.uxpin.com\/interactive-and-animated-prototypes.html\">custom animations editor<\/a>. Add an action to the navigation trigger: advanced animation. \u201cStep 1\u201d represents the state that the animation will reach upon completion. This is the point at which the navigation should be fully revealed, the background blurry, and the \u201chamburger\u201d icon changed to a \u201cX\u201d. To start all that, reveal and expand the navigation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11070\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/6-Animate-the-open-nav-action.gif\" alt=\"Animate the open-nav action\" width=\"600\" height=\"346\"><\/p>\n<p>Set each navigation link to appear 50ms after the last. For example, \u201cAppetizers\u201d begins at 50ms and \u201cEntrees\u201d begins at 100ms.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11069\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/7-Set-nav-item-timing.gif\" alt=\"Set nav item timing\" width=\"600\" height=\"347\"><\/p>\n<p>Now for a little switcheroo. <em>Hide<\/em> the open-nav icon and <em>show<\/em> the close-nav icon. Then <em>hide<\/em> the focused background and <em>show<\/em> the blurred background.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11068\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/8-Change-background-and-icons.gif\" alt=\"Change background and icons\" width=\"600\" height=\"348\"><\/p>\n<h3>6. Fix the order<\/h3>\n<p>Finally, make sure the phone bezel is the above the navigation links, but below the open\/close icons. This ensures that the navigation links only appear in the app\u2019s working area, not over the phone itself.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11067\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/9-Move-the-bezel-up.gif\" alt=\"Move the bezel up\" width=\"600\" height=\"346\"><\/p>\n<p>Then try it out! Advanced animations are a powerful way to give interactions a little pizzazz. To set yourself up for success, though, we suggest that you name elements as you go, pay attention to their layer orders, and don\u2019t be afraid to experiment. Hope you enjoyed this tutorial. Now play with <a href=\"https:\/\/www.uxpin.com\/\">UXPin<\/a> on your own!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn to create a mobile off-canvas navigation menu that flies in with a bit of style and grace.<\/p>\n","protected":false},"author":27,"featured_media":7791,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,15,11,4,6,19],"tags":[34,25,31],"class_list":["post-7717","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-responsive-web-design","category-tutorials","category-ui-design","category-ux-design","category-uxpin","tag-fun","tag-prototyping","tag-user-experience-2"],"yoast_title":"Creating a fly-in navigation menu","yoast_metadesc":"Learn to create a mobile off-canvas navigation menu that flies in with a bit of style and grace.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.6 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creating a fly-in navigation menu<\/title>\n<meta name=\"description\" content=\"Learn to create a mobile off-canvas navigation menu that flies in with a bit of style and grace.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animations &amp; Interactions in Design: Creating a Fading Navigation Menu\" \/>\n<meta property=\"og:description\" content=\"Learn to create a mobile off-canvas navigation menu that flies in with a bit of style and grace.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2015-08-28T19:37:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-29T23:03:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/Untitled-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"330\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Gremillion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benthinkin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Gremillion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-a-fly-in-navigation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-a-fly-in-navigation\\\/\"},\"author\":{\"name\":\"Ben Gremillion\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"headline\":\"Animations &amp; Interactions in Design: Creating a Fading Navigation Menu\",\"datePublished\":\"2015-08-28T19:37:31+00:00\",\"dateModified\":\"2020-04-29T23:03:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-a-fly-in-navigation\\\/\"},\"wordCount\":599,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-a-fly-in-navigation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/08\\\/Untitled-2.png\",\"keywords\":[\"Fun ;)\",\"Prototyping\",\"user experience\"],\"articleSection\":[\"Blog\",\"Responsive Web Design\",\"Tutorials\",\"UI Design\",\"UX Design\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-a-fly-in-navigation\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-a-fly-in-navigation\\\/\",\"name\":\"Creating a fly-in navigation menu\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-a-fly-in-navigation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-a-fly-in-navigation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/08\\\/Untitled-2.png\",\"datePublished\":\"2015-08-28T19:37:31+00:00\",\"dateModified\":\"2020-04-29T23:03:40+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"description\":\"Learn to create a mobile off-canvas navigation menu that flies in with a bit of style and grace.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-a-fly-in-navigation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-a-fly-in-navigation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-a-fly-in-navigation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/08\\\/Untitled-2.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/08\\\/Untitled-2.png\",\"width\":720,\"height\":330,\"caption\":\"Untitled 2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/creating-a-fly-in-navigation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animations &amp; Interactions in Design: Creating a Fading Navigation Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\",\"name\":\"Ben Gremillion\",\"description\":\"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.\",\"sameAs\":[\"https:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/benthinkin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/bengremillion\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating a fly-in navigation menu","description":"Learn to create a mobile off-canvas navigation menu that flies in with a bit of style and grace.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/","og_locale":"en_US","og_type":"article","og_title":"Animations &amp; Interactions in Design: Creating a Fading Navigation Menu","og_description":"Learn to create a mobile off-canvas navigation menu that flies in with a bit of style and grace.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/","og_site_name":"Studio by UXPin","article_published_time":"2015-08-28T19:37:31+00:00","article_modified_time":"2020-04-29T23:03:40+00:00","og_image":[{"width":720,"height":330,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/Untitled-2.png","type":"image\/png"}],"author":"Ben Gremillion","twitter_card":"summary_large_image","twitter_creator":"@benthinkin","twitter_misc":{"Written by":"Ben Gremillion","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/"},"author":{"name":"Ben Gremillion","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"headline":"Animations &amp; Interactions in Design: Creating a Fading Navigation Menu","datePublished":"2015-08-28T19:37:31+00:00","dateModified":"2020-04-29T23:03:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/"},"wordCount":599,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/Untitled-2.png","keywords":["Fun ;)","Prototyping","user experience"],"articleSection":["Blog","Responsive Web Design","Tutorials","UI Design","UX Design","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/","name":"Creating a fly-in navigation menu","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/Untitled-2.png","datePublished":"2015-08-28T19:37:31+00:00","dateModified":"2020-04-29T23:03:40+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"description":"Learn to create a mobile off-canvas navigation menu that flies in with a bit of style and grace.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/Untitled-2.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/08\/Untitled-2.png","width":720,"height":330,"caption":"Untitled 2"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-fly-in-navigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Animations &amp; Interactions in Design: Creating a Fading Navigation Menu"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f","name":"Ben Gremillion","description":"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.","sameAs":["https:\/\/www.uxpin.com","https:\/\/x.com\/benthinkin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/bengremillion\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/7717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=7717"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/7717\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/7791"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=7717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=7717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=7717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}