{"id":614,"date":"2021-03-22T14:15:55","date_gmt":"2021-03-22T14:15:55","guid":{"rendered":"http:\/\/www.friezedesign.co.uk\/blog\/?p=614"},"modified":"2026-02-25T14:24:22","modified_gmt":"2026-02-25T14:24:22","slug":"how-to-use-animation-on-your-website","status":"publish","type":"post","link":"https:\/\/www.friezedesign.co.uk\/blog\/how-to-use-animation-on-your-website\/","title":{"rendered":"How to Use Animation on Your Website"},"content":{"rendered":"<style>.wp-block-kadence-advancedheading.kt-adv-heading_79fe7f-08, .wp-block-kadence-advancedheading.kt-adv-heading_79fe7f-08[data-kb-block=\"kb-adv-heading_79fe7f-08\"]{text-align:center;font-weight:400;font-style:normal;font-family:Georgia, serif;text-transform:capitalize;color:#ea024d;}.wp-block-kadence-advancedheading.kt-adv-heading_79fe7f-08 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_79fe7f-08[data-kb-block=\"kb-adv-heading_79fe7f-08\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading_79fe7f-08 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_79fe7f-08[data-kb-block=\"kb-adv-heading_79fe7f-08\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h4 class=\"kt-adv-heading_79fe7f-08 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_79fe7f-08\">&#8220;The Excessive Use of animation on many websites results in a horrible experience for many Website visitors&#8221;<\/h4>\n\n\n\n<p>Perhaps you&#8217;ve been actively encouraged to include &#8216;showy&#8217; animation on your website &#8211; after all it <em>is <\/em>an easy sell. Naturally you might be initially impressed by a web designer showing all these wonderful animated &#8216;slides&#8217; and &#8216;fades&#8217; you could have on your site. Dare we say, with that &#8220;sales pitch&#8221; you might be more inclined to use their services?<\/p>\n\n\n\n<p>What you might be less aware of &#8211; is how excessive animation can have a enormous detrimental effect on your website.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Animation Devours Resources<\/h2>\n\n\n\n<p>All computer-based devices &#8211; be that a Smartphone or a Laptop &#8211; have limited resources. Recalculating the position of complex elements on a screen, multiple times a second, requires computing power. Many devices just aren&#8217;t up to the job.<\/p>\n\n\n\n<p>Your website shouldn&#8217;t devour people&#8217;s computing resources for the sake of some &#8216;pizzazz&#8217;! But that&#8217;s what animation does, and it&#8217;s what so many poorly designed websites do.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Poor Web Design &#8211; Poor Experience &#8211; Poor Results<\/h3>\n\n\n\n<p>The consequence for the owner of a resource-hungry, poorly designed website, is that many of those visiting it will have an terrible user experience (UX).<\/p>\n\n\n\n<p>Excessive animation means the site takes too long to appear &#8211; waiting for the animation scripts to download, before it can even start. The animations then begin skipping frames and &#8216;janking&#8217;, because the user&#8217;s device has limited capabilities. The whole site begins to lag behind the user&#8217;s interactions, causing confusion and frustration&#8230; the user decides it&#8217;s time to leave.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use Animation to Enhance, Not Hinder, the User Experience (UX)<\/h2>\n\n\n\n<p>Animation can actually improve the user experience if used intelligently:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Highlight<\/h3>\n\n\n\n<p>As you might with different colours or text sizes, subtle animation offers an additional technique to draw attention to, or differentiate between, elements on your website. A slowly evolving, subtle colour change on a element may help it to stand out?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prompting<\/h3>\n\n\n\n<p>Animation is an excellent option for assisting with any interactive processes you may have on your website. A &#8216;pulsing&#8217; button indicating to the user what they should do next, helps make the interaction quicker and easier.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Enhanced User Interface (UI) Interaction<\/h3>\n\n\n\n<p>Animation can help with making website UIs more user-friendly too.<\/p>\n\n\n\n<p>It&#8217;s important, when making dramatic interface changes on your website, to make sure the user understands what has occurred. Instantaneous UI changes can be disorientating.<\/p>\n\n\n\n<p>An example of this, most of us have experienced, is with website navigation menus being hidden on small screens. The &#8216;hamburger&#8217; icon \u2630 is used to indicate a &#8216;closed&#8217; menu, and on click\/touch, &#8216;slide-over animation&#8217; is used to show the user how the UI has transitioned to reveal the links.<\/p>\n\n\n\n<p>Animated drop-down menus, &#8216;modal&#8217; overlays and accordion-style &#8216;slide-to-reveal more&#8217;, are other such examples of how animation can help enhance website UIs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Temporal Feedback<\/h3>\n\n\n\n<p>Animation is, by definition, a perfect way to offer temporal feedback. If your website includes any activity where a user must wait for a process to complete, offering animated feedback reassures and helps them to stay patient. A 0% to 100% completion counter, is a widely used example.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Animate to Make Things Better, Not Worse<\/h2>\n\n\n\n<p>When <a href=\"http:\/\/www.friezedesign.co.uk\/web_design_portfolio.html\">we design websites<\/a>, our mantra is &#8220;everything must be justified&#8221;. Why have we included that image there? What purpose does it serve? The same should be true when using animation.<\/p>\n\n\n\n<p>This is not to say that aesthetic qualities aren&#8217;t important too, they most definitely are (justifiably so). But not to the detriment of <a href=\"https:\/\/www.friezedesign.co.uk\/blog\/website-usability\/\" data-type=\"post\" data-id=\"260\">usability<\/a>, accessibility or the user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;The Excessive Use of animation on many websites results in a horrible experience for many Website visitors&#8221; Perhaps you&#8217;ve been actively encouraged to include &#8216;showy&#8217; animation on your website &#8211; after all it is an easy sell. Naturally you might be initially impressed by a web designer showing all these wonderful animated &#8216;slides&#8217; and &#8216;fades&#8217; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[36,12,66,17,19,65,18,64,67],"class_list":["post-614","post","type-post","status-publish","format-standard","hentry","category-web-design","tag-best-practice","tag-graphical-user-interface","tag-ui","tag-usability","tag-user-experience","tag-user-interaction","tag-ux","tag-web-animation","tag-website-animation"],"_links":{"self":[{"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":67,"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/614\/revisions"}],"predecessor-version":[{"id":821,"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/614\/revisions\/821"}],"wp:attachment":[{"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.friezedesign.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}