{"id":852,"date":"2015-12-15T12:56:20","date_gmt":"2015-12-15T09:56:20","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=852"},"modified":"2023-08-17T14:07:32","modified_gmt":"2023-08-17T14:07:32","slug":"interface-animation-the-force-of-motion","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/","title":{"rendered":"Interface Animation. The Force of Motion"},"content":{"rendered":"<p><span style=\"color: #333333;\">Even in ancient times, people knew about the great power of motion. Literature, art, folklore, technologies all witness numerous attempts of people to explain motion as one of the brightest features of life. Probably that is why the Latin aphorism \u201cSemper in motu\u201d (Always in motion) is still one of the most popular expressions often becoming a motto of active people and teams able to provide great results.<\/span><\/p>\n<p><span style=\"color: #333333;\">Working on diverse projects on UX\/UI design, designers of Tubik Studio are deeply aware of the role and high potential of animation in modern efficient user interfaces. Well-thought-out and tested interface animation as well as icons, whose role we analyzed in <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/icons-in-ui-design-great-power-of-small-details\/\">one of our previous articles<\/a>, is able to support fast and easy interaction and has high potential to fulfill multiple functions. So, today we would like to consider some aspects of interface animation, its functions, and role in modern design.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8150\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/11\/tubik-studio-pull-refresh-animation.gif\" alt=\"tubikstudio pull refresh animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-use-animations-in-mobile-apps\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Pull To Refresh<\/a>\u00a0<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">The essence of animation<\/span><\/h2>\n<p><span style=\"color: #333333;\">The term \u201canimation\u201d, so popular in different spheres of human activity, has an ancient and somehow romantic origin. It origins from Latin word anima meaning \u201cair, soul\u201d and in most cases defines the process of adding life and soul to the objects first of all via motion. So, animation is the process of creating the illusion of motion which started since times immemorial when people tried to show the illusion of movements in carvings or paintings and has become widely popular worldwide via animated cartoons. It opened new horizons to the artists and created a new field of work with images.<\/span><\/p>\n<p><span style=\"color: #333333;\">Nowadays, animation has also won its special place in interface design as one of the most important tools for successful interaction. As people are mostly visually driven creatures, the force behind the picture which is worth a thousand words gets even stronger with the help of animation. With the rapid growth of mobile devices animation got even more significant popularity and diversity, enabling fast and easy processes for touchable interfaces, especially on-the-go. Therefore, animation is a very powerful way to make the product simple, clear, bright and user-centered thus providing positive user experience.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9579\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/ipad-interactions-animation-1-1.gif\" alt=\"ipad interactions animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>iPad App Interactions\u00a0<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Types of interface animation<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Animation is a very flexible and multifunctional tool satisfying different users&#8217; needs. In general, based on our practical experience of work with interfaces for different websites and mobile applications, we could define several functional groups of animation in UI:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">animation enabling <a href=\"https:\/\/blog.tubikstudio.com\/ui-animation-microinteraction-for-macroresult\/\">microinteraction<\/a><\/span><\/li>\n<li><span style=\"color: #333333;\">animation showing the path of the process<\/span><\/li>\n<li><span style=\"color: #333333;\">clarifying\/explanatory animation<\/span><\/li>\n<li><span style=\"color: #333333;\">decorative animation<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">Before looking at them in a bit more detail, we should mention that this division is actually very relative because in most cases designers try to apply several functions of an animated item at the same time to use its potential as much as possible.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Animation for microinteraction<\/span><\/h2>\n<p><span style=\"color: #333333;\">The first type, including animation enabling microinteraction is, perhaps, the most useful type of motion design in the aspect of user interfaces. It becomes the way to make interaction quick and clear for the user, often imitating real physical interaction such as pushing the buttons, opening boxes or doors, pulling handles, and so on and so forth. Animation of this kind is like health: people do not notice it when it works properly but understand its importance when something goes wrong. Microinteractions enabled by interface animation are also hardly notable for a user until the moment when they face the problem of their absence.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8749\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/hamburger_menu-tubik-studio.gif\" alt=\"hamburger menu animation tubik-studio\" width=\"800\" height=\"600\" \/><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ui-design-basic-types-of-buttons-in-user-interfaces\/\"><span style=\"color: #333333;\"><em>Hamburger Menu Animation\u00a0<\/em><\/span><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8750\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/page-indicator-animation-tubikstudio.gif\" alt=\"page indicator animation tubikstudio\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Rubber Indicator\u00a0<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Microinteractions inform users that operations are successfully completed: the buttons are pushed, the toggles are moved, the necessary fields are filled, the rules are provided, etc. And, vice versa, they can inform about the cases when the steps aren&#8217;t done successfully, so a user gets the information about the mistake or not completed operation in the fast and easy way.<\/span><\/p>\n<p><span style=\"color: #333333;\">Animation applied for <a class=\"\" href=\"https:\/\/blog.tubikstudio.com\/ui-animation-microinteraction-for-macroresult\/\"><span class=\"gr-progress\" style=\"color: #333333;\">microinteractions<\/span><\/a> are usually small but as all the small and simple elements of the interface, they take a lot of time and effort to become clear and boost the usability of the product.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8761\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/calendar-app-animation-tubik.gif\" alt=\"calendar app animation tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Calendar App Animation<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Animation showing the process<\/span><\/h2>\n<p><span style=\"color: #333333;\">This type of animation is somehow broadening the potential of the previous type. It includes different ways of demonstrating the stage of the processes to the user, for example, different kinds of loading bars showing how fast the process goes and activates users&#8217; expectations on possible time and way of getting results.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7660\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubik-studio-motion-design.gif\" alt=\"tubik studio motion design\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Timeline App\u00a0<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8751\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/preloader-animation-tubik-studio.gif\" alt=\"preloader animation tubik-studio\" width=\"800\" height=\"600\" \/><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-use-animations-in-mobile-apps\/\"><span style=\"color: #333333;\"><em>Preloader\u00a0<\/em><\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Clarifying\/explanatory animation<\/span><\/h2>\n<p><span style=\"color: #333333;\">This type of animation is widely popular in different <a href=\"https:\/\/blog.tubikstudio.com\/onboarding-tutorial-design-greet-inform-engage\/\">tutorials<\/a> and tooltips, but actually, their potential is very wide. Via motion of details, <a href=\"https:\/\/blog.tubikstudio.com\/mascot-magic-personifying-your-brand\/\">characters<\/a>, illustrated items, or texts they provide diverse prompts to the users on how to deal with the application. Also, animation of this type can engage users to take further steps which can be not so obvious at first glance or explain some more complicated operations. It is especially important to provide usability of the products wit a big amount of information through which users should quickly find the one which is necessary for their aim. Therefore, they can increase the level of usability and therefore the desirability of the product.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8759\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/restaurant-menu-animation-ui.gif\" alt=\"restaurant menu animation ui\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Restaurant Menu\u00a0<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8148\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/11\/weather_app-design.gif\" alt=\"weather app design\" width=\"800\" height=\"600\" \/><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/weather-in-ui-design-come-rain-or-shine\/\"><span style=\"color: #333333;\"><em>Weather App\u00a0<\/em><\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Decorative animation<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">This type of animation is now often used with the aim of creating original and engaging user interface design, which will be catchy and bright. Decorative animations liven the interface, can add interesting details not providing really vital features of successful interaction but making the general image more interesting and standing out of the crowd. Decorative animations can become a good way to attract users&#8217; attention. However, they should be carefully analyzed in the perspective of retaining users in the long term.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9622\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/pirate-illustration-tubik-studio-1-1.gif\" alt=\"pirate illustration tubik studio-1\" width=\"400\" height=\"300\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Pirate\u00a0<\/em><\/span><\/p>\n<p><span style=\"color: #333333;\">Earlier we have provided the case study on decorative and promotional animation in the article called \u00a0<a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-animation\/\">Case study: animation. Designing motion<\/a><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Benefits and drawbacks<\/span><\/h2>\n<p><span style=\"color: #333333;\">Among the essential benefits of interface animation we would mention:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\">increased usability<\/span><\/li>\n<li><span style=\"color: #333333;\">originality<\/span><\/li>\n<li><span style=\"color: #333333;\">convenient and easy interaction<\/span><\/li>\n<li><span style=\"color: #333333;\">ability to fulfill several functions simultaneously<\/span><\/li>\n<li><span style=\"color: #333333;\">the high potential of speeding up the processes of interaction<\/span><\/li>\n<li><span style=\"color: #333333;\">providing clear feedback to the user and creating necessary expectations<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">Everything mentioned above can seem convincing factors to use animation all around the app or website, but in practice, we insist on being very careful and wise in applying motion in design. As nothing is ideal in our world, animation in UI also has a number of drawbacks that should be carefully researched and analyzed before deciding on this or that animation. Some of them are:<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"color: #333333;\"><strong>\u00a0taking big traffic resource for loading<\/strong><\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">If your animation is too heavy and the conditions of the product use were not analyzed thoughtfully, it can bring out the problem of long loading and annoy users instead of creating positive emotions<\/span><br \/>\n<span style=\"color: #333333;\"> \u00a0<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\"><strong>overloading the screen\/page<\/strong><\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">Even purely decorative animations should have their aim, place, and function which is based on the general concept. Animation used for pure attraction and not enhancing positive emotions and efficient interaction risks losing lots of users who will find the way to their problem solution overloaded with unnecessary details. <\/span><\/p>\n<p><span style=\"color: #333333;\">Moreover, the screen which is overloaded with animated items decreases their potential. To make the analogy, you can like one song very much, but if you hear it everywhere a thousand times per day you can end up hating it just because you are fed up with it. Animation brings the same thing: when it is an interesting and engaging detail it will work successfully to help the user and will look attractive in contrast with static elements. But if you make everything on your page move, users will get tired very quickly. You can feel the power and joy of motion only if you have a chance to stop when needed.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span style=\"color: #333333;\"><strong>distraction<\/strong><\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333;\">In the case of user interface design, even any smallest piece of animation should correspond to the aim of the page or screen. So, first of all, UI\/UX designers should research and think over the functions and aims of the screen or page as well as the abilities and wishes of the target audience which will interact with them. If the animation doesn&#8217;t solve any problem, doesn&#8217;t enhance the positive experience, and doesn&#8217;t support a user, it would be better to omit it in order to create the performance of the product only with essential details, not overloading the general process.<\/span><\/p>\n<p><span style=\"color: #333333;\">To sum up, interface animation today is a great way to retain users as it makes their user experience pleasant and enables solving their problems faster. However, a designer should deeply analyze its potential for increasing the usability, utility, and desirability of the product before making a decision to apply it to the product.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Recommended Reading<\/span><\/h2>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/web-animation\/\">Motion in UX Design: 6 Effective Types of Web Animation<\/a><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-animation-microinteraction-for-macroresult\/\">UI Animation: Microinteraction for\u00a0Macroresult<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/animated-interactions-motion-on-purpose\/\">Animated Interactions. Motion on Purpose<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-animation-eye-pleasing-problem-solving\/\">UI Animation: Eye-Pleasing, Problem-Solving<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/\">UI in Action. 15 Animated Design Concepts of Mobile UI<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-upper-app-coding-ui-animation\/\">Case Study: Upper App. Coding UI Animation<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/creative-motion-12-concepts-of-interface-animation\/\">Creative Motion: 12 Concepts of Interface Animation<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/dont-stay-still-why-brand-needs-an-animated-logo\/\">Don\u2019t Stay Still. Why Brand Needs an Animated Logo<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/motion-for-mobile-creative-concepts-of-ui-animation\/\">Motion for Mobile. 20 Creative Concepts of UI Animation<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The article by Tubik Studio analyzes features and types of interface animation as a powerful tool of efficient interaction enhancing positive user experience.<\/p>\n","protected":false},"author":3,"featured_media":9601,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,7,9],"tags":[365,437,447,16,457,20,458,100,465,138,467,147,468,151,479,212,482,233,487,256,491,258,502,319,515,331,533,336],"coauthors":[],"class_list":["post-852","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-processes_and_tools","category-ui_ux","tag-product-design","tag-tips","tag-tubik-studio","tag-animation","tag-ui","tag-app-design","tag-ui-animation","tag-design","tag-ui-design-examples","tag-design-process","tag-ui-design-practices","tag-design-studio","tag-ui-design-process","tag-design-tips","tag-usability","tag-graphic-design","tag-user-experience","tag-human-computer-interaction","tag-user-experience-design-process","tag-interaction-design","tag-user-interface","tag-interface-animation","tag-ux","tag-mobile-app","tag-uxui","tag-mobile-ui","tag-web-design","tag-motion-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Interface animation. The Force of Motion<\/title>\n<meta name=\"description\" content=\"The article by Tubik Studio analyzes features and types of interface animation as a powerful tool of efficient interaction enhancing positive user experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interface animation. The Force of Motion\" \/>\n<meta property=\"og:description\" content=\"Interface animation is now recognized as the powerful tool in modern design. However, it can make interaction not only positive, but also negative if it isn&#039;t well thought-out. In this article Tubik Studio team analyzes basic features and types of interface animation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-15T09:56:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T14:07:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik_Animation_Shot-1-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/\",\"name\":\"Interface animation. The Force of Motion\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik_Animation_Shot-1-1.png\",\"datePublished\":\"2015-12-15T09:56:20+00:00\",\"dateModified\":\"2023-08-17T14:07:32+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The article by Tubik Studio analyzes features and types of interface animation as a powerful tool of efficient interaction enhancing positive user experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik_Animation_Shot-1-1.png\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik_Animation_Shot-1-1.png\",\"width\":800,\"height\":600,\"caption\":\"Tubik Animation Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Interface Animation. The Force of Motion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Interface animation. The Force of Motion","description":"The article by Tubik Studio analyzes features and types of interface animation as a powerful tool of efficient interaction enhancing positive user experience.","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:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/","og_locale":"en_US","og_type":"article","og_title":"Interface animation. The Force of Motion","og_description":"Interface animation is now recognized as the powerful tool in modern design. However, it can make interaction not only positive, but also negative if it isn&#039;t well thought-out. In this article Tubik Studio team analyzes basic features and types of interface animation.","og_url":"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2015-12-15T09:56:20+00:00","article_modified_time":"2023-08-17T14:07:32+00:00","og_image":[{"width":800,"height":600,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik_Animation_Shot-1-1.png","type":"image\/png"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/","url":"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/","name":"Interface animation. The Force of Motion","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik_Animation_Shot-1-1.png","datePublished":"2015-12-15T09:56:20+00:00","dateModified":"2023-08-17T14:07:32+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The article by Tubik Studio analyzes features and types of interface animation as a powerful tool of efficient interaction enhancing positive user experience.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik_Animation_Shot-1-1.png","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik_Animation_Shot-1-1.png","width":800,"height":600,"caption":"Tubik Animation Design"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/interface-animation-the-force-of-motion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Interface Animation. The Force of Motion"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=852"}],"version-history":[{"count":5,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/852\/revisions"}],"predecessor-version":[{"id":14768,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/852\/revisions\/14768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/9601"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=852"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}