{"id":15815,"date":"2018-08-16T11:00:37","date_gmt":"2018-08-16T10:00:37","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=15815"},"modified":"2020-12-21T05:29:00","modified_gmt":"2020-12-21T05:29:00","slug":"animated-transitions-in-mobile-apps","status":"publish","type":"post","link":"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/","title":{"rendered":"Animated Transitions in Mobile Apps"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Animation is a big part of user experience. When it comes to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/shopjessicabuckley.com\/blog\/enhance-user-experience-animated-transitions\/\">transitions<\/a> in mobile apps, there are a lot of things you can communicate very subtly with animation. Send the message, open Settings, check the box, navigate to another page \u2014 these are all moments of change. Animating a transition is an excellent way to reinforce the user\u2019s action.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In this article, we\u2019ll review the common cases when functional animated transitions can complement the visual design and support interactions.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1BFrwa4CJPRy9FHJfTN7J0w.gif\" alt=\"visual design and support interactions\" width=\"800\" height=\"600\" \/><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Image: <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/ramotion.com\/\">Ramotion<\/a><\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Provide system\u00a0status<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When users trigger some action they expect to see a visual response \u2014 the system should make it clear that it received the request and working on it. Here are a few cases when animated feedback can benefit user experience:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><em>Confirm user action<\/em>. Users get an acknowledgment that system receives the action. When users have visual feedback, this prevents them from tapping on the element again.<\/li>\n<\/ul>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/16YGP-5TxLJSuDwBYsKzREg.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/16YGP-5TxLJSuDwBYsKzREg.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Notify users of the results of their actions. Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/ColinGarven\">Colin\u00a0Garven<\/a><\/p><\/div>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><em>Update content <\/em>on the page using <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxplanet.org\/pull-to-refresh-ui-pattern-42a85f671cdf\">pull to refresh<\/a>. Visual feedback in the format of loading indicator helps users understand that system is working on their request.<\/li>\n<\/ul>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/14inUgD5uTe7HLDBHQv6Afw.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/14inUgD5uTe7HLDBHQv6Afw.gif\" alt=\"Subtle animation helps users understand what is going on\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Subtle animation helps users understand what is going on. Image:\u00a0<a class=\"link link--blue fontWeight-4\"href=\"http:\/\/ramotion.com\">Ramotion<\/a><\/p><\/div>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><em>Waiting for content to load.<\/em> Loading doesn\u2019t have to be boring. Almost any app can utilize a subtle animation when loading it\u2019s content to prevent users from going away. Loading animations keep the user occupied with visual feedback and as a result, users perceive a shorter wait time.<\/li>\n<\/ul>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1v2aqu1L9u0KPau2SRnW2SQ.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1v2aqu1L9u0KPau2SRnW2SQ.gif\" alt=\"Animation can keep the user engaged even before the app fully loads\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Animation can keep the user engaged even before the app fully loads. Image:\u00a0<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/UI8\">UI8<\/a><\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Connect different steps in multi-step process<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sometimes users need to go through a series of steps to complete an action. It should be clear that steps are connected to each other. Animation can help you to connect each step to create a whole journey.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Below is an excellent example of how using animation can create a linear progression of events.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/13DfrZ4Lr5o0Z1GGUSBKMPA.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/13DfrZ4Lr5o0Z1GGUSBKMPA.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/antalik\">Jakub\u00a0Antal\u00edk<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Animation can help designers to create <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxplanet.org\/design-patterns-progressive-disclosure-for-mobile-apps-f41001a293ba\">progressive disclosure<\/a>. Progressive disclosure makes the interface easier to learn by reducing the amount information presented at one time. Here are two great examples of using progressive disclosure to provide information in meaningful chunks:<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1-ZKoNlYFNCZvQIjcpEztxQ.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1-ZKoNlYFNCZvQIjcpEztxQ.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Image: <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/ramotion.com\">Ramotion<\/a><\/p><\/div>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1L3kohGRcOKq8iAKOHe3KIQ.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1L3kohGRcOKq8iAKOHe3KIQ.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/AntonSKV\">Anton Skvortsov<\/a><\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Introducing new\u00a0elements<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When we introduce a new element on the page, we try to focus users attention on the object and help them answer the question \u201cWhy do I see a new object?\u201d Animation helps you to define object relationships and hierarchies when introducing new elements.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1bszMTRqq3YsYWhAx-ETa2Q.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1bszMTRqq3YsYWhAx-ETa2Q.gif\" alt=\"Animation can show where new objects are coming from\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Animation can show where new objects are coming from. Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/virgilpana\">Virgil\u00a0Pana<\/a><\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Give the user a sense of spatial orientation<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Animation helps users build better mental models of spatial information. And this is especially important for mobile users \u2014 a combination of short attention span together with a small screen size can easily lead to the situation when users get lost in the maze of screens.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We can use animation to guide the user. Animation helps to explain how information flows from one state to another are linked together. It keeps users from getting lost by giving the user information about what they\u2019re going through right now.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1B1FjxiHYKt315HjZ37GuYA.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1B1FjxiHYKt315HjZ37GuYA.gif\" alt=\"Orientational animation lets you know where are you now in relation to where you came from\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Orientational animation lets you know where are you now in relation to where you came from. Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/johnjbrown\">Jae-seong, Jeong<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the following example, the floating action button (FAB) transforms into a header and makes it clear to the user how these two objects related to each other.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1XZoVmWDk7axAiolY5SCXag.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1XZoVmWDk7axAiolY5SCXag.gif\" alt=\"Animation can help you build a relationship between elements\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Animation can help you build a relationship between elements. Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/anish_chandran\">Anish\u00a0Chandran<\/a><\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Minimize cognitive load<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Cognitive load is an amount of mental effort required to use a product. Cognitive load has a direct effect on how easily for users to interact with your app. Generally, the more effort required to use a product the less desirable it becomes.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As designers, our goal should be in creating an interface that is easy to use. Animation, when used well, reduces user effort required to complete the task.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In almost any app users have to fill out some forms. Many forms have text placeholders as labels for fields. When users tap on such field, the label disappears. As a result, it becomes hard for the user to figure out what this field represents. Floating label helps users to keep the context and makes it comfortable to interact with long forms.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1GqNGB0mTjPwsRXInOlCZUw.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1GqNGB0mTjPwsRXInOlCZUw.gif\" alt=\"When it comes to user input, don\u2019t rely on users memory. Make all critical information visible\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">When it comes to user input, don\u2019t rely on users memory. Make all critical information visible. Image:\u00a0<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/mds\">MDS<\/a><\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Allow users to comprehend the functional change<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Functional change happens when the element changes its function after the interaction. For example, when a user taps on the button, the button will mean a different thing. This animation helps users find the answer to the question \u201cWhat this element does now?\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One common example of functional change which can be seen in many mobile interfaces is a toggle. Animation helps users understand what is the state of the element.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1tqifRUGHl2Sm6V1VosfySg.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1tqifRUGHl2Sm6V1VosfySg.gif\" alt=\"Button animates on tap so users can see the change.\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Button animates on tap so users can see the change. Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/jurrehoutkamp\">Jurre\u00a0Houtkamp<\/a><\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In some cases, the functional change of single element leads to the change of entire view. For example, a hamburger menu that changes to \u2018X\u2019 and activates a new view.<\/p>\n<div id=\"attachment_6580\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1jjdpKJS-qrkY4mf-CVhBOQ.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2018\/08\/1jjdpKJS-qrkY4mf-CVhBOQ.gif\" alt=\"Make it clear to users that object utility was changed\" width=\"800\" height=\"600\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Make it clear to users that object utility was changed. Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/tamaskojo\">Tamas\u00a0Kojo<\/a><\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Conclusion<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Animation is powerful when used in sophisticated ways. It solves a lot of functional problems within interfaces and makes them feel alive and genuinely responsive to the user. No matter what app you design it tells a story to your users. And animation can help you tell a story much more effectively.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Thank you!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Originally published at <\/em><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/babich.biz\/animated-transitions-in-mobile-apps\/\"><em>babich.biz<\/em><\/a><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/what-is-product-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">What is Product Design?<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/enhance-user-experience-animated-transitions\/\" target=\"_blank\" rel=\"noopener noreferrer\">Enhance Your User Experience with Animated Transitions<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/motion-creates-emotion\/\" target=\"_blank\" rel=\"noopener noreferrer\">When Motion Creates Emotion<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/design-principles-reducing-cognitive-load\/\" target=\"_blank\" rel=\"noopener noreferrer\">Design Principles for Reducing Cognitive Load<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/shopjessicabuckley.com\/blog\/psychology-principles-every-uiux-designer-needs-know\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Psychology Principles Every UI\/UX Designer Needs to Know<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Animation is a big part of user experience. When it comes to transitions in mobile apps, there are a lot of things you can communicate very subtly with animation. Send the message, open Settings, check the box, navigate to another page \u2014 these are all moments of change. Animating a transition is an excellent way to reinforce the user\u2019s action&#8230;. <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":165,"featured_media":15830,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-15815","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"In this article, we\u2019ll review the common cases when functional animated transitions can complement the visual design and support interactions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated Transitions in Mobile Apps | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"In this article, we\u2019ll review the common cases when functional animated transitions can complement the visual design and support interactions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-16T10:00:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-21T05:29:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/08\/nickcc.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"650\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/shopjessicabuckley.com\/wp-content\/uploads\/2018\/08\/nickcc.png\",\"width\":\"1600\",\"height\":\"650\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/#webpage\",\"url\":\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/\",\"name\":\"Animated Transitions in Mobile Apps | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/#primaryimage\"},\"datePublished\":\"2018-08-16T10:00:37+00:00\",\"dateModified\":\"2020-12-21T05:29:00+00:00\",\"description\":\"In this article, we\\u2019ll review the common cases when functional animated transitions can complement the visual design and support interactions.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/#webpage\"},\"author\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/628149198b3652cd6341d5d8baf3c872\"},\"headline\":\"Animated Transitions in Mobile Apps\",\"datePublished\":\"2018-08-16T10:00:37+00:00\",\"dateModified\":\"2020-12-21T05:29:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/shopjessicabuckley.com\/blog\/animated-transitions-in-mobile-apps\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#\/schema\/person\/628149198b3652cd6341d5d8baf3c872\",\"name\":\"Nick Babich\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2b91d9b457afee054f90b68440ad9e23902300b23c8109206f0a7d32fe0fbea4?s=96&d=mm&r=g\",\"caption\":\"Nick Babich\"},\"description\":\"I\\u2019m a software developer, tech enthusiast and UI\/UX lover. http:\/\/babich.biz\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/15815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/165"}],"replies":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=15815"}],"version-history":[{"count":0,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/15815\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/15830"}],"wp:attachment":[{"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=15815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=15815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=15815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}