{"id":18195,"date":"2017-08-31T18:28:01","date_gmt":"2017-08-31T12:58:01","guid":{"rendered":"https:\/\/blog.resellerclub.com\/?p=18195"},"modified":"2026-05-22T12:20:48","modified_gmt":"2026-05-22T12:20:48","slug":"motion-in-web-design","status":"publish","type":"post","link":"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/","title":{"rendered":"Motion in Web Design"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Motion has become an important element in design. Google explains motion in web design as <\/span><i><span style=\"font-weight: 400;\">\u2018<\/span><\/i><i><span style=\"font-weight: 400;\">Something as simple as tapping a card to expand and reveal more information is made better by fluid animation&#8217;<\/span><\/i><span style=\"font-weight: 400;\">. The reason why motion in web design is important is because:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It engages the user<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It gives the user a sense of control<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It allows for fluidity which results in seamless user experience <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Is an indicator that an action is in progress<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">To elaborate on the last point, at one of our Ctrl+F5 events earlier this year, Anish Tripathi (VP Product Design at BookMyShow) made a point in design that stayed with me. He said if a user on a website makes an action for example like clicking a button, &#8211; that reloads a page but does not see any motion like a loading icon, it can be frustrating user experience as the user does not know what to expect. He\/she is forced to assume your website is down and will instantly click away to another site. That\u2019s exactly what makes motion so important. It makes your website communicate. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">I\u2019ve grouped motion into two kinds on the basis of my understanding:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Interactive<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Passive<\/span><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h3><b>Interactive Motion<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Interactive motion as I\u2019ve classified it is where the user interacts with the design to make it move. His action causes movement. This is the kind of motion that gives the user a sense of control. Let\u2019s take a look at what motion elements are interactive:<\/span><\/p>\n<p><b>Hovercrafting<\/b><span style=\"font-weight: 400;\">: This is the motion that occurs when a user hovers on a particular word in a text passage. Hovercrafting is a motion that focuses on the little details using varying fonts, styling or word background.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18197\" src=\"\/blog\/wp-content\/uploads\/2017\/08\/hover.gif\" alt=\"\" width=\"238\" height=\"134\"><\/p>\n<p><span style=\"font-weight: 400;\">We\u2019ve covered hover effects in depth in <\/span><a href=\"\/blog\/can-hover-effects-be-future-proofed\/\"><b>The Future of Hover in Design \u2013 impact of Touchscreens, VR &amp; more<\/b><\/a><\/p>\n<p><b>Pull-out menu bar<\/b><span style=\"font-weight: 400;\">: This again is interactive motion in this, the user can choose to expand the information he\/she is viewing on a screen through a slider. Without the user action, this motion does not take place. Pull-out sliders can be easily tucked away with a hamburger menu.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18199\" src=\"\/blog\/wp-content\/uploads\/2017\/08\/slider.gif\" alt=\"\" width=\"932\" height=\"1056\"><\/p>\n<p><b>Progress bar<\/b><span style=\"font-weight: 400;\">: Progress bars aids user experience because it lets the user know how far she\/he\u2019s reached in an article, or how close she\/he is to finishing a survey so she\/he can evaluate if it\u2019s worth his time. A progress bar or animation can also indicate how long the action she\/he has made will take to be implemented.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18201\" src=\"\/blog\/wp-content\/uploads\/2017\/08\/progress.gif\" alt=\"\" width=\"800\" height=\"600\"><\/p>\n<p><b>Scroll bars<\/b><span style=\"font-weight: 400;\">: Similar to progress bars, scroll bars give the user control and let him\/her know how close he\/she is to the end of the page (unless it\u2019s an infinite scroll). Many designs have jumped on the scroll bar trend and moved away from the traditional function of a vertical scroll to creative parallax scrolling.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18203\" src=\"\/blog\/wp-content\/uploads\/2017\/08\/scroll.gif\" alt=\"\" width=\"800\" height=\"600\"><\/p>\n<p><b>Forms:<\/b><span style=\"font-weight: 400;\"> Some creative ways of revamping the conventional form is by adding motion. Once the user has answered a question and hits the arrow button, the next question rolls after her\/his action.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18205\" src=\"\/blog\/wp-content\/uploads\/2017\/08\/forms.gif\" alt=\"\" width=\"966\" height=\"595\"><\/p>\n<p>&nbsp;<\/p>\n<h3><b>Passive Motion<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Passive design, as I\u2019ve classified it is motion in web design that are not dependent on the user\u2019s action. This motion happens irrespective. Let\u2019s take a look at some design elements that qualify as passive motion.<\/span><\/p>\n<p><b>Website background<\/b><span style=\"font-weight: 400;\">: This is probably one of my all time favourite motions &#8211; to see animation or video in hero images or homepage sliders.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18207\" src=\"\/blog\/wp-content\/uploads\/2017\/08\/websitebackgound.gif\" alt=\"\" width=\"800\" height=\"600\"><\/p>\n<p><b>Dynamic charts<\/b><span style=\"font-weight: 400;\">: I love how motion has been used to make data visually appealing with dynamic charts. Dynamic charts can be made to auto-load when a user reaches a section on his\/her screen. They make for interesting design &amp; retaining user attention.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18209\" src=\"\/blog\/wp-content\/uploads\/2017\/08\/charts.gif\" alt=\"\" width=\"958\" height=\"573\"><\/p>\n<p><b>Loading: <\/b><span style=\"font-weight: 400;\">Patience is not a virtue most of us have when it comes to website load speed, hence the loading icon. Most of us are very familiar with the loading icon and know what to expect when we see it. However, if you only saw a static loading icon sans motion, you\u2019d probably think your internet connection is slow and your page is stuck. <\/span><i><span style=\"font-weight: 400;\">Motion <\/span><\/i><span style=\"font-weight: 400;\">in a loading icon not only lets you know how soon you are to viewing what you came to see, it also lets you know that something is happening on the page and your only action is to wait.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18211\" src=\"\/blog\/wp-content\/uploads\/2017\/08\/loading.gif\" alt=\"\" width=\"400\" height=\"300\"><\/p>\n<p><span style=\"text-decoration: underline;\"><b>Conclusion<\/b><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Motion has been one of the most popular design trends in recent times especially with mobile devices. Smart &amp; touchscreen devices opened up opportunities to play with designs, transitions, parallax scrolling, pinch, zoom &amp; more. I want to leave you with my favourite website background motion for this month. I promise you won\u2019t regret seeing it: <\/span><a href=\"https:\/\/www.vistabluesingerisland.com\/\"><span style=\"font-weight: 400;\">https:\/\/www.vistabluesingerisland.com\/<\/span><\/a><\/p>\n<h6>Images courtesy: Dribble.com<\/h6>\n<h2>Reseller Club Hosting Services<\/h2>\n<p><a href=\"https:\/\/www.resellerclub.com\/reseller-hosting\">Reseller Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/windows-reseller-hosting\">Windows Reseller Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/cloud-hosting\">Cloud Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/vps-hosting\">VPS Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/managed-vps-hosting\">Managed VPS Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/dedicated-server-hosting\">Dedicated Server Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/windows-dedicated-server-hosting\">Windows Dedicated Server<\/a> | <a href=\"https:\/\/www.resellerclub.com\/managed-dedicated-server-hosting\">Managed Dedicated Server<\/a> | <a href=\"https:\/\/www.resellerclub.com\/shared-hosting\">Linux Shared Hosting<\/a> | <a href=\"https:\/\/www.resellerclub.com\/windows-shared-hosting\">Windows Shared Hosting<\/a><\/p>\n<div class=\"fb-background-color\">\n\t\t\t  <div \n\t\t\t  \tclass = \"fb-comments\" \n\t\t\t  \tdata-href = \"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/\"\n\t\t\t  \tdata-numposts = \"10\"\n\t\t\t  \tdata-lazy = \"true\"\n\t\t\t\tdata-colorscheme = \"light\"\n\t\t\t\tdata-order-by = \"social\"\n\t\t\t\tdata-mobile=true>\n\t\t\t  <\/div><\/div>\n\t\t  <style>\n\t\t    .fb-background-color {\n\t\t\t\tbackground:  !important;\n\t\t\t}\n\t\t\t.fb_iframe_widget_fluid_desktop iframe {\n\t\t\t    width: 100% !important;\n\t\t\t}\n\t\t  <\/style>\n\t\t  ","protected":false},"excerpt":{"rendered":"<p>Motion has become an important element in design. Google explains motion in web design as \u2018Something as simple as tapping a card to expand and reveal more information is made better by fluid animation&#8217;. The reason why motion in web design is important is because: It engages the user It gives the user a sense<\/p>\n","protected":false},"author":40,"featured_media":18213,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1527,1367],"tags":[4685,4681,4689],"hashtags":[],"class_list":{"0":"post-18195","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-featured-post","8":"category-design","9":"tag-interactive-motion","10":"tag-motion","11":"tag-passive-motion"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Motion in Web Design<\/title>\n<meta name=\"description\" content=\"Discover how motion in web design improves user engagement, visual storytelling, navigation, and overall website experience for modern users online.\" \/>\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.resellerclub.com\/blog\/motion-in-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Motion in Web Design\" \/>\n<meta property=\"og:description\" content=\"Discover how motion in web design improves user engagement, visual storytelling, navigation, and overall website experience for modern users online.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"ResellerClub Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100005889763273\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-31T12:58:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-22T12:20:48+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Amrita\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.resellerclub.com\/blog\/#website\",\"url\":\"https:\/\/www.resellerclub.com\/blog\/\",\"name\":\"ResellerClub Blog\",\"description\":\"Web Hosting &amp; Domains\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.resellerclub.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/#webpage\",\"url\":\"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/\",\"name\":\"Motion in Web Design\",\"isPartOf\":{\"@id\":\"https:\/\/www.resellerclub.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/#primaryimage\"},\"datePublished\":\"2017-08-31T12:58:01+00:00\",\"dateModified\":\"2026-05-22T12:20:48+00:00\",\"author\":{\"@id\":\"https:\/\/www.resellerclub.com\/blog\/#\/schema\/person\/3022c632f8c79376e89b21ebd7e3c777\"},\"description\":\"Discover how motion in web design improves user engagement, visual storytelling, navigation, and overall website experience for modern users online.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.resellerclub.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Motion in Web Design\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.resellerclub.com\/blog\/#\/schema\/person\/3022c632f8c79376e89b21ebd7e3c777\",\"name\":\"Amrita\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.resellerclub.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.resellerclub.com\/blog\/wp-content\/uploads\/2019\/08\/amrita.k-150x150.jpg\",\"contentUrl\":\"https:\/\/www.resellerclub.com\/blog\/wp-content\/uploads\/2019\/08\/amrita.k-150x150.jpg\",\"caption\":\"Amrita\"},\"description\":\"Amrita Konaiagari is the Team Lead for Content Marketing at Endurance International Group (APAC). She is also the Editor of the ResellerClub blog. She holds a Bachelor\\u2019s Degree in Psychology from St. Xavier\\u2019s College, Mumbai and a Master\\u2019s Degree in Communication & Journalism from the Mumbai University. She has 9 years of experience in Digital Marketing. She has a passion for home decor and hopes to one day be a book author.\",\"url\":\"https:\/\/www.resellerclub.com\/blog\/author\/amrita-k\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Motion in Web Design","description":"Discover how motion in web design improves user engagement, visual storytelling, navigation, and overall website experience for modern users online.","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.resellerclub.com\/blog\/motion-in-web-design\/","og_locale":"en_US","og_type":"article","og_title":"Motion in Web Design","og_description":"Discover how motion in web design improves user engagement, visual storytelling, navigation, and overall website experience for modern users online.","og_url":"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/","og_site_name":"ResellerClub Blog","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100005889763273","article_published_time":"2017-08-31T12:58:01+00:00","article_modified_time":"2026-05-22T12:20:48+00:00","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Amrita","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.resellerclub.com\/blog\/#website","url":"https:\/\/www.resellerclub.com\/blog\/","name":"ResellerClub Blog","description":"Web Hosting &amp; Domains","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.resellerclub.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/#primaryimage","inLanguage":"en-US","url":"","contentUrl":""},{"@type":"WebPage","@id":"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/#webpage","url":"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/","name":"Motion in Web Design","isPartOf":{"@id":"https:\/\/www.resellerclub.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/#primaryimage"},"datePublished":"2017-08-31T12:58:01+00:00","dateModified":"2026-05-22T12:20:48+00:00","author":{"@id":"https:\/\/www.resellerclub.com\/blog\/#\/schema\/person\/3022c632f8c79376e89b21ebd7e3c777"},"description":"Discover how motion in web design improves user engagement, visual storytelling, navigation, and overall website experience for modern users online.","breadcrumb":{"@id":"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.resellerclub.com\/blog\/motion-in-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.resellerclub.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Motion in Web Design"}]},{"@type":"Person","@id":"https:\/\/www.resellerclub.com\/blog\/#\/schema\/person\/3022c632f8c79376e89b21ebd7e3c777","name":"Amrita","image":{"@type":"ImageObject","@id":"https:\/\/www.resellerclub.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/www.resellerclub.com\/blog\/wp-content\/uploads\/2019\/08\/amrita.k-150x150.jpg","contentUrl":"https:\/\/www.resellerclub.com\/blog\/wp-content\/uploads\/2019\/08\/amrita.k-150x150.jpg","caption":"Amrita"},"description":"Amrita Konaiagari is the Team Lead for Content Marketing at Endurance International Group (APAC). She is also the Editor of the ResellerClub blog. She holds a Bachelor\u2019s Degree in Psychology from St. Xavier\u2019s College, Mumbai and a Master\u2019s Degree in Communication & Journalism from the Mumbai University. She has 9 years of experience in Digital Marketing. She has a passion for home decor and hopes to one day be a book author.","url":"https:\/\/www.resellerclub.com\/blog\/author\/amrita-k\/"}]}},"_links":{"self":[{"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/posts\/18195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/comments?post=18195"}],"version-history":[{"count":3,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/posts\/18195\/revisions"}],"predecessor-version":[{"id":40143,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/posts\/18195\/revisions\/40143"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/media?parent=18195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/categories?post=18195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/tags?post=18195"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/hashtags?post=18195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}