{"id":10706,"date":"2015-12-11T17:13:06","date_gmt":"2015-12-12T01:13:06","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=10706"},"modified":"2024-09-09T19:51:32","modified_gmt":"2024-09-10T02:51:32","slug":"web-animations-in-interaction-design-2016-and-beyond","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/","title":{"rendered":"Web Animations In Interaction Design: 2016 And Beyond"},"content":{"rendered":"<p>Web animation was once thought of as just ornamentation. But as technology advances and internet connections accelerate, designers are embracing the<a href=\"http:\/\/alistapart.com\/article\/ui-animation-and-ux-a-not-so-secret-friendship\"> practical benefits<\/a>.<\/p>\n<p>The sooner you recognize its full potency, the better.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10707\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image10.jpg\" alt=\"Screenshot of Denise Chandler\u2019s website\" width=\"721\" height=\"399\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image10.jpg 900w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image10-542x300.jpg 542w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/p>\n<p><i>Photo credit:<\/i><a href=\"http:\/\/www.denisechandler.com\/\"> <i>http:\/\/www.denisechandler.com\/<\/i><\/a><\/p>\n<p>We\u2019ll explain web animation\u2019s 5 most effective uses, as well as what to expect the near future. But in order to understand where animation is at now and where it\u2019s going, you must first know where it came from.<\/p>\n<h2>Pre-Internet Roots<\/h2>\n<p>Like other recent design trends (<a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/minimalist-ui-design-trends-2016\/\">minimalism<\/a>, for example), animation has a rich history reaching far back before digital design.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10708\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image08.jpg\" alt=\"Screenshot of Nebo\u2019s website\" width=\"721\" height=\"502\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image08.jpg 900w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image08-431x300.jpg 431w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/p>\n<p><i>Photo credit:<\/i><i>http:\/\/en.nebo-studio.com\/<\/i><\/p>\n<p>Two Disney animators, Frank Thomas and Ollie Johnston, published one of the best go-to books on the subject,<a href=\"http:\/\/www.amazon.com\/The-Illusion-Life-Disney-Animation\/dp\/0786860707\"> <i>Illusion of Life: Disney Animation<\/i><\/a>. The 12 principles outlined in this book still hold true today, and \u2014 with slight modifications \u2014 apply just as well to the web as to film.<\/p>\n<p>While we explore each of these 12 principles in detail in <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/interaction-design-best-practices-intangibles\/\">Interaction Design Best Practices: Book 2<\/a>, we\u2019ll go ahead and give a quick overview:<\/p>\n<ul>\n<li>Squash and stretch<\/li>\n<li>Anticipation<\/li>\n<li>Staging<\/li>\n<li>Straight Ahead Action and Pose to Pose<\/li>\n<li>Follow Through and Overlapping Action<\/li>\n<li>Slow In and Slow Out<\/li>\n<li>Arc<\/li>\n<li>Secondary Action<\/li>\n<li>Timing<\/li>\n<li>Exaggeration<\/li>\n<li>Solid Drawing<\/li>\n<li>Appeal<\/li>\n<\/ul>\n<p>These principles outline how to do animation right, whether with a cartoon dog or a window on a website. To see them in action, animator<a href=\"http:\/\/www.centolodigiani.com\/\"> Cento Lodigiani<\/a><a href=\"http:\/\/the12principles.tumblr.com\/\"> recreated each one as a GIF using simple shapes<\/a>.<\/p>\n<h2>5 Main Uses for Web Animation<\/h2>\n<p>As we mentioned above, animation has practical benefits beyond just visual appeal. Web animation creates a smoother and more polished user experience. Let\u2019s take a look at some helpful tactics.<\/p>\n<h3>1.Revealing Information<\/h3>\n<p>Animated effects help get your message across more clearly. As a communication aid, animation is most commonly used to reveal information, usually through hovering or clicking.<\/p>\n<p>Visuals like a slow fade, a box crawling in from the side, or a UI card spinning to reveal more information are far more preferable than the content suddenly appearing out of nowhere. Animation makes the revelation less jarring \u2014 not to mention provides an opportunity to add some delightful character to your site.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10709\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image0211.png\" alt=\"Screenshot of Flickr\u2019s user interface\" width=\"720\" height=\"480\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image0211.png 973w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image0211-450x300.png 450w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><i>Photo credit: <\/i><a href=\"https:\/\/www.flickr.com\/\"><i>https:\/\/www.flickr.com\/<\/i><\/a><\/p>\n<p>A popular example is <a href=\"https:\/\/www.flickr.com\/\">Flickr<\/a>, where the capture slowly fades in when you hover over the picture.<\/p>\n<h3>2. Transition<\/h3>\n<p>New information windows aren\u2019t the only potentially jarring experience with site interaction. Switching pages, tabs, scrolling, activating buttons \u2014 all these can benefit from an animated transition. The eyes need the motion of animation to avoid an otherwise abrupt change.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10710\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image073-1024x492.png\" alt=\"Screenshot of Take It\u2019s app user interface\" width=\"720\" height=\"346\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image073-1024x492.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image073-624x300.png 624w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image073.png 1283w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><i>Photo credit: <\/i><i>https:\/\/www.takeitapp.co\/en<\/i><\/p>\n<p>The scroll-based site for the Take It apps uses transitional animations well. As you scroll down through the different pages\u2026<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10711\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image113-1024x494.png\" alt=\"Screenshot of Take It\u2019s app user interface\" width=\"722\" height=\"348\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image113-1024x494.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image113-622x300.png 622w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image113.png 1287w\" sizes=\"auto, (max-width: 722px) 100vw, 722px\" \/><\/p>\n<p><i>Photo credit: <\/i><i>https:\/\/www.takeitapp.co\/en<\/i><\/p>\n<p>\u2026 The same six photographs move and change with you. This makes moving through the pages smooth, comprehensible, and fun \u2014 plus it helps demonstrates the points of each page.<\/p>\n<h3>3. Notification<\/h3>\n<p>Because the human eye is attracted to motion, animation is the perfect way to announce a change. This is especially useful for ecommerce sites, as it helps recreate the instant gratification of in-shop purchases.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10712\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image049.png\" alt=\"Screenshot of Photojojo\u2019s app\u2019s user interface\" width=\"495\" height=\"596\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image049.png 495w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image049-249x300.png 249w\" sizes=\"auto, (max-width: 495px) 100vw, 495px\" \/><\/p>\n<p><i>Photo credit: <\/i><a href=\"http:\/\/photojojo.com\/store\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i>http:\/\/photojojo.com\/store\/<\/i><\/a><\/p>\n<p>The <a href=\"http:\/\/photojojo.com\/store\/\" target=\"_blank\" rel=\"noopener noreferrer\">Photojojo Store<\/a> takes advantage of this by using an animated \u201c+1\u201d that flies to the shopping cart when users select an item. This also draws attention to cart itself, notifying users where to click for checkout.<\/p>\n<h3>4. Emphasis<\/h3>\n<p>The attention-grabbing property of the motion applies to more than notifications. It can also direct the user\u2019s focus to any point on the screen. As long as there are not many other competing elements on the screen, even the slightest bit of motion will grab attention. That\u2019s why the cursor in text fields blinks when idle.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10713\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image037.png\" alt=\"Screenshot of Seattle\u2019s website user interface\" width=\"719\" height=\"291\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image037.png 902w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image037-700x283.png 700w\" sizes=\"auto, (max-width: 719px) 100vw, 719px\" \/><\/p>\n<p><i>Photo credit: <\/i><a href=\"http:\/\/www.spaceneedle.com\/home\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i>http:\/\/www.spaceneedle.com\/home\/<\/i><\/a><\/p>\n<p>Seattle\u2019s <a href=\"http:\/\/www.spaceneedle.com\/home\/\" target=\"_blank\" rel=\"noopener noreferrer\">Space Needle<\/a> site takes advantage of this subtlety. Since the site\u2019s upward scrolling seems counter-intuitive (but makes sense given the context of exploring the tower), they draw attention to the instructions with a minor \u2014 but effective \u2014 animation in the up arrows.<\/p>\n<h3>5. Delight<\/h3>\n<p>Sometimes animation can be used for no other reason than delight. Like we described in the guide <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-trends-2015-2016\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web Design Trends 2015-16<\/a>, this is especially useful as a distraction from an otherwise unpleasant experience \u2014 such as loading time or a missing page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10714\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image057-1024x641.png\" alt=\"Screenshot of Humaan\u2019s website user interface\" width=\"721\" height=\"451\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image057-1024x641.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image057-479x300.png 479w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image057-290x180.png 290w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image057.png 1094w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/p>\n<p><i>Photo credit:<\/i><a href=\"http:\/\/humaan.com\/about\/\" target=\"_blank\" rel=\"noopener noreferrer\"> <i>http:\/\/humaan.com\/about\/<\/i><\/a><\/p>\n<p>For example,<a href=\"http:\/\/humaan.com\/about\/\" target=\"_blank\" rel=\"noopener noreferrer\"> Humaan<\/a> uses animated backgrounds, scroll-activated motion, and hover-revealed text (in conjunction with the content) to add personality and humanity to what would otherwise be just another dull \u201cAbout Us\u201d page.<\/p>\n<\/section><section class=\"related-books-section\"><h3>Grab design ebooks created by best designers<\/h3><p class=\"section-desc\">All for free<\/p><ul class=\"related-books-list\"><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/interaction-design-best-practices-intangibles\/\" class=\"action-get-ebook\" data-name=\"Interaction Design Best Practices\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Interaction-Design-Best-Practices-Mastering-the-Intangibles-.jpg\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Interaction Design Best Practices Mastering the Intangibles\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Interaction-Design-Best-Practices-Mastering-the-Intangibles-.jpg 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Interaction-Design-Best-Practices-Mastering-the-Intangibles--210x300.jpg 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/interaction-design-best-practices-intangibles\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Interaction Design Best Practices\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-best-practices\/\" class=\"action-get-ebook\" data-name=\"Web UI Design Best Practices\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Best-Practices.jpg\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Web UI Design Best Practices\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Best-Practices.jpg 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Best-Practices-210x300.jpg 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-best-practices\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Web UI Design Best Practices\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ux-design-trends-2015-2016-digital-products\/\" class=\"action-get-ebook\" data-name=\"UX Design 2015&nbsp;&#038;&nbsp;2016\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/book-knowledge-262x375.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"book knowledge\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/book-knowledge-262x375.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/book-knowledge-210x300.png 210w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/book-knowledge.png 332w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ux-design-trends-2015-2016-digital-products\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"UX Design 2015&nbsp;&#038;&nbsp;2016\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/curated-interaction-design-animations\/\" class=\"action-get-ebook\" data-name=\"Interaction Design &#038; Complex Animations\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Interaction-Design-Complex-Animations.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Interaction Design Complex Animations\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Interaction-Design-Complex-Animations.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Interaction-Design-Complex-Animations-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/curated-interaction-design-animations\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Interaction Design &#038; Complex Animations\">Download<\/a><\/li><\/ul><\/section><section class=\"related-books-section-single\"><section class=\"post-content-wrapper\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Interaction-Design-Complex-Animations.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Interaction Design Complex Animations\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Interaction-Design-Complex-Animations.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Interaction-Design-Complex-Animations-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/figure><article><h3>Do you want to know more about UI Design?<\/h3><p>Download 'Interaction Design &#038; Complex Animations' <span>FOR FREE!<\/span><\/p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/curated-interaction-design-animations\/\" class=\"btn btn-flat btn-darker action-get-ebook\">Download e-book for free<\/a><\/article><\/section><a href=\"#closeEbookPanel\" class=\"icon-close action-close-ebook-panel\">Close<\/a><\/section><section class=\"post-content-wrapper\">\n<h2>A Note about Timing<\/h2>\n<p>One key component to all animation is <b>timing<\/b>. For animations triggered by the user, try to make want the effect to occur<a href=\"http:\/\/www.nngroup.com\/articles\/website-response-times\/\"> within 0.1 seconds<\/a> of activation to make the interface feel responsive. We follow this rule ourselves (shown below in a sample <a href=\"https:\/\/www.uxpin.com\" target=\"_blank\" rel=\"noopener noreferrer\">UXPin<\/a> prototype created with our <a href=\"https:\/\/www.uxpin.com\/ui-kit.html\" target=\"_blank\" rel=\"noopener noreferrer\">free UI kit<\/a>).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2014\/11\/UXPin-showing-form-on-scroll.gif\" alt=\"Animation of a user interface in UXPin\" width=\"730\" height=\"400\" \/><\/p>\n<p>After scrolling to the bottom, the signup form appears within 300 ms. This is an intentional effect we added to support a snappy feel without creating a jarring effect.<\/p>\n<h2>The Future of Web Animation<\/h2>\n<p>Now that animation is shedding its association with cartoons, more professional industries like financial or medical institutions are using it with a more refined style.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10727\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/vpqUNhj96F-1024x666.gif\" alt=\"Screenshot of Avenir Clinic\u2019s user interface\" width=\"722\" height=\"469\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/vpqUNhj96F-1024x666.gif 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/vpqUNhj96F-461x300.gif 461w\" sizes=\"auto, (max-width: 722px) 100vw, 722px\" \/><\/p>\n<p><i>Photo credit:<\/i><a href=\"http:\/\/avenirclinic.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"> <i>http:\/\/avenirclinic.com\/<\/i><\/a><\/p>\n<p>Dentistry is historically an industry that takes itself seriously, so<a href=\"http:\/\/avenirclinic.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"> L\u2019Avenir Dental Clinic<\/a> uses conservative animated effects: scrolling activates new windows to slide open. No need for bouncy icons.<\/p>\n<p>Ecommerce, too, can take advantage of animation for practical purposes \u2014 namely the 360-degree rotation of products pictures. This gives the user more security when shopping online, one less advantage in-person shopping has left.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31545 size-full\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/08\/6-web-design-trends-awwwards-image07.gif\" alt=\"Animation of Bugaboo\u2019s interactions interface\" width=\"941\" height=\"374\" \/><\/p>\n<p><i>Photo credit:<\/i> <em><a href=\"https:\/\/www.bugaboo.com\/US\/en_US\/home\" target=\"_blank\" rel=\"noopener noreferrer\">Bugaboo<\/a><\/em><\/p>\n<p>As more designers embrace<a href=\"http:\/\/www.google.com\/design\/spec\/animation\/authentic-motion.html#\" target=\"_blank\" rel=\"noopener noreferrer\"> Google\u2019s Material Design<\/a> philosophy, their take on the technique will become more prominent. Their documentation describes animation in this way:<\/p>\n<p><i>\u201cJust as the shape of an object indicates how it might behave, watching an object move demonstrates whether it\u2019s light or heavy, flexible or rigid, small or large. In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity.&#8221;<\/i><\/p>\n<p>Not only is animation expanding its range of industries, it\u2019s also evolving in its application. As a means to combine animation with realism, animated photography is emerging as an up-and-coming trend.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10717\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image012.jpg\" alt=\"Screenshot of Bolia\u2019s website user interface\" width=\"720\" height=\"501\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image012.jpg 900w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image012-431x300.jpg 431w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><i>Photo credit:<\/i><a href=\"http:\/\/lookbook.bolia.com\/chilling\/\" target=\"_blank\" rel=\"noopener noreferrer\"> <i>http:\/\/lookbook.bolia.com\/chilling\/<\/i><\/a><\/p>\n<p><a href=\"http:\/\/lookbook.bolia.com\/chilling\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bolia<\/a> blends real photography and scrolling animation to immerse their users in their online experience. This blurring of the lines of reality is only going to become more popular as technology allows it.<\/p>\n<h2>Additional UX Knowledge<\/h2>\n<p>For more analysis of the web animations \u2014 as well as 9 other current web design trends \u2014 check out the free ebook<a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-trends-2015-2016\/\" target=\"_blank\" rel=\"noopener noreferrer\"> Web Design Trends 2015-2016<\/a>.<\/p>\n<p>You\u2019ll find 166 hand-picked examples from companies like Adidas, Intercom, Apple, Google, Versace, and others. To help speed up the design process, there\u2019s also a curated list of 100 free resources.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-trends-2015-2016\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/blog-book1.png\" alt=\"Get a free e-book\" width=\"720\" height=\"330\" \/><\/a><\/p>\n<p><em>Feature photo credit: <a href=\"http:\/\/www.squarespace.com\/websites\/\" target=\"_blank\" rel=\"noopener noreferrer\">Squarespace<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn modern web animation tactics and how to adapt to the future of interaction design. <\/p>\n","protected":false},"author":9,"featured_media":10718,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,6,7],"tags":[],"class_list":["post-10706","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design","category-ux-design","category-web-design"],"yoast_title":"Web Animations In Interaction Design: 2016 And Beyond | UXPin","yoast_metadesc":"Learn modern web animation tactics and how to adapt to the future of interaction design.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Web Animations In Interaction Design: 2016 And Beyond | UXPin<\/title>\n<meta name=\"description\" content=\"Learn modern web animation tactics and how to adapt to the future of interaction design.\" \/>\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\/web-animations-in-interaction-design-2016-and-beyond\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Animations In Interaction Design: 2016 And Beyond\" \/>\n<meta property=\"og:description\" content=\"Learn modern web animation tactics and how to adapt to the future of interaction design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-12T01:13:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-10T02:51:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-11-at-5.15.00-PM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1497\" \/>\n\t<meta property=\"og:image:height\" content=\"950\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jerry Cao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jerry Cao\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 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\\\/web-animations-in-interaction-design-2016-and-beyond\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-animations-in-interaction-design-2016-and-beyond\\\/\"},\"author\":{\"name\":\"Jerry Cao\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"headline\":\"Web Animations In Interaction Design: 2016 And Beyond\",\"datePublished\":\"2015-12-12T01:13:06+00:00\",\"dateModified\":\"2024-09-10T02:51:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-animations-in-interaction-design-2016-and-beyond\\\/\"},\"wordCount\":1150,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-animations-in-interaction-design-2016-and-beyond\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/Screen-Shot-2015-12-11-at-5.15.00-PM.png\",\"articleSection\":[\"Blog\",\"UI Design\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-animations-in-interaction-design-2016-and-beyond\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-animations-in-interaction-design-2016-and-beyond\\\/\",\"name\":\"Web Animations In Interaction Design: 2016 And Beyond | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-animations-in-interaction-design-2016-and-beyond\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-animations-in-interaction-design-2016-and-beyond\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/Screen-Shot-2015-12-11-at-5.15.00-PM.png\",\"datePublished\":\"2015-12-12T01:13:06+00:00\",\"dateModified\":\"2024-09-10T02:51:32+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"description\":\"Learn modern web animation tactics and how to adapt to the future of interaction design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-animations-in-interaction-design-2016-and-beyond\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-animations-in-interaction-design-2016-and-beyond\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-animations-in-interaction-design-2016-and-beyond\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/Screen-Shot-2015-12-11-at-5.15.00-PM.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/Screen-Shot-2015-12-11-at-5.15.00-PM.png\",\"width\":1497,\"height\":950,\"caption\":\"Screen Shot 2015 12 11 at 5.15.00 PM\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/web-animations-in-interaction-design-2016-and-beyond\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Animations In Interaction Design: 2016 And Beyond\"}]},{\"@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\\\/e58da1b4c401eb288436977eb9810a18\",\"name\":\"Jerry Cao\",\"description\":\"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.\",\"sameAs\":[\"http:\\\/\\\/uxpin.com\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/jerrycao\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Web Animations In Interaction Design: 2016 And Beyond | UXPin","description":"Learn modern web animation tactics and how to adapt to the future of interaction design.","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\/web-animations-in-interaction-design-2016-and-beyond\/","og_locale":"en_US","og_type":"article","og_title":"Web Animations In Interaction Design: 2016 And Beyond","og_description":"Learn modern web animation tactics and how to adapt to the future of interaction design.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/","og_site_name":"Studio by UXPin","article_published_time":"2015-12-12T01:13:06+00:00","article_modified_time":"2024-09-10T02:51:32+00:00","og_image":[{"width":1497,"height":950,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-11-at-5.15.00-PM.png","type":"image\/png"}],"author":"Jerry Cao","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jerry Cao","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/"},"author":{"name":"Jerry Cao","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"headline":"Web Animations In Interaction Design: 2016 And Beyond","datePublished":"2015-12-12T01:13:06+00:00","dateModified":"2024-09-10T02:51:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/"},"wordCount":1150,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-11-at-5.15.00-PM.png","articleSection":["Blog","UI Design","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/","name":"Web Animations In Interaction Design: 2016 And Beyond | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-11-at-5.15.00-PM.png","datePublished":"2015-12-12T01:13:06+00:00","dateModified":"2024-09-10T02:51:32+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"description":"Learn modern web animation tactics and how to adapt to the future of interaction design.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-11-at-5.15.00-PM.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-11-at-5.15.00-PM.png","width":1497,"height":950,"caption":"Screen Shot 2015 12 11 at 5.15.00 PM"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/web-animations-in-interaction-design-2016-and-beyond\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Web Animations In Interaction Design: 2016 And Beyond"}]},{"@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\/e58da1b4c401eb288436977eb9810a18","name":"Jerry Cao","description":"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.","sameAs":["http:\/\/uxpin.com"],"url":"https:\/\/www.uxpin.com\/studio\/author\/jerrycao\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/10706","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=10706"}],"version-history":[{"count":6,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/10706\/revisions"}],"predecessor-version":[{"id":54487,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/10706\/revisions\/54487"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/10718"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=10706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=10706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=10706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}