{"id":27810,"date":"2021-04-06T08:21:23","date_gmt":"2021-04-06T06:21:23","guid":{"rendered":"https:\/\/www.inovex.de\/blog\/?p=19909"},"modified":"2022-11-21T11:44:18","modified_gmt":"2022-11-21T10:44:18","slug":"removing-animations-people-troubled-motion-css-angular","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/","title":{"rendered":"Better User Experience: Removing Animations for People Troubled by Motion (CSS \/ Angular)"},"content":{"rendered":"<p>When building websites we not only try to deliver a solid, tested and maintainable solution, we also always strive for a great user experience. For some users who are troubled by motion when looking at websites this means restricting or even removing animations. This article shows to create a fitting solution.<\/p>\n<p><!--more-->Users differ greatly in their needs and limitations, some are:<\/p>\n<ul>\n<li>Some users cannot use a mouse (for example, permanently because they have muscular problems or temporarily when carrying a child on their arm). So we make our websites accessible by multiple input devices such as mouse, touchscreen and keyboard.<\/li>\n<li>Some users are visually impaired (because they are color blind or their vision is decreased). So we use proper color palettes, high contrast and make the website scalable.<\/li>\n<li>Some users are troubled by motion (because they may have a vestibular motion disorder or are easily distracted).<\/li>\n<\/ul>\n<p>For the last group, animations in a website can be a burden. However, animations are a good thing, as they can help the user processing the contents of a website better. They can make a fine website a great one. Therefore, we do not want to remove animations in general but only for those users that prefer reduced motion.<\/p>\n<p>And we can do exactly that with a media query called <span class=\"lang:css highlight:0 decode:true crayon-inline\">prefers-reduced-motion<\/span>:<\/p>\n<pre class=\"lang:css decode:true\">@media (prefers-reduced-motion: reduce) {}<\/pre>\n<p>The browser support is quite good since almost all modern browsers have it; see <a href=\"https:\/\/caniuse.com\/prefers-reduced-motion\">caniuse.com<\/a>.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#Disable-animations-in-CSS\" >Disable animations in CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#Disable-animations-in-Angular\" >Disable animations in Angular<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#How-to-activate-the-reduced-motion-setting\" >How to activate the reduced motion setting<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#Removing-animations-or-reducing-animations\" >Removing animations or reducing animations?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#What-about-older-browsers\" >What about older browsers?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#Conclusion-and-outlook\" >Conclusion and outlook<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Disable-animations-in-CSS\"><\/span>Disable animations in CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The first idea on how to disable animations in CSS is probably this:<\/p>\n<pre class=\"lang:css decode:true \">@media (prefers-reduced-motion: reduce) {\r\n  *, *::after, *::before {\r\n    animation: none !important;\r\n    transition: none !important;\r\n  }\r\n}<\/pre>\n<p>but this breaks JavaScript code that listens to <span class=\"lang:js highlight:0 decode:true crayon-inline\">transitionend<\/span>\u00a0or related events. Setting the <span class=\"lang:css highlight:0 decode:true crayon-inline \">animation-duration: 0s<\/span>\u00a0does not work either because in some browsers this may lead to no style changes at all (for a discussion, see <a href=\"https:\/\/github.com\/jensimmons\/cssremedy\/issues\/11\">https:\/\/github.com\/jensimmons\/cssremedy\/issues\/11<\/a>).<\/p>\n<p>The most robust way we found is this:<\/p>\n<pre class=\"lang:css decode:true \">@media (prefers-reduced-motion: reduce) {\r\n  *, *::after, *::before {\r\n    animation-duration: 1ms !important;      \/* 1 *\/\r\n    animation-delay: -1ms !important;        \/* 2 *\/\r\n    animation-iteration-count: 1 !important; \/* 3 *\/\r\n    transition-duration: 1ms !important;     \/* 4 *\/\r\n    transition-delay: -1ms !important;       \/* 5 *\/\r\n  }  \r\n}\r\n<\/pre>\n<ol>\n<li>We set a very short <span class=\"lang:css highlight:0 decode:true crayon-inline\">animation-duration<\/span>, thereby still firing animation events.<\/li>\n<li>We set a negative <span class=\"lang:css highlight:0 decode:true crayon-inline\">animation-delay<\/span>\u00a0to even out the duration. Some browsers ignore negative delays, so they get a very fast animation instead (hopefully not noticeable).<\/li>\n<li>To end animations after one iteration (prevent infinite repeats), we set the <span class=\"lang:css highlight:0 decode:true crayon-inline\">animation-iteration-count<\/span>.<\/li>\n<li>To also remove transitions (but keep transition events) we set a very short <span class=\"lang:css highlight:0 decode:true crayon-inline\">transition-duration<\/span>.<\/li>\n<li>We set a negative <span class=\"lang:css highlight:0 decode:true crayon-inline\">transition-delay<\/span> to even out the transition duration.<\/li>\n<\/ol>\n<p>All five declarations contain the <span class=\"lang:css highlight:0 decode:true crayon-inline \">!important<\/span>\u00a0rule to override the specificity of any selector. This, of course, only works as long as we do not use <span class=\"lang:css highlight:0 decode:true crayon-inline \">!important<\/span>\u00a0anywhere else in our declarations (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Specificity#The_!important_exception\">which we should not<\/a>).<\/p>\n<p>This is a very radical approach, since we remove all animations and transitions everywhere on the page, but it does its job. A more sensible approach follows further below.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Disable-animations-in-Angular\"><\/span>Disable animations in Angular<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We should declare animations and transitions in CSS. However, not everything can be animated by using CSS only. For example, closing an element by animating its height to <em>0<\/em> cannot be done without JavaScript because in CSS we can only animate from one specific value to another. We cannot animate from <em>intrinsic height<\/em> to <em>0<\/em>.<\/p>\n<p>Angular offers a full module to help animate components where CSS alone is not sufficient. It is quite easy to solve the height animation problem with Angular. For a working example, see <a href=\"https:\/\/codesandbox.io\/s\/disable-animations-in-angular-1pctb?file=\/src\/app\/app.module.ts\">https:\/\/codesandbox.io\/s\/disable-animations-in-angular-1pctb?file=\/src\/app\/app.module.ts<\/a>.<\/p>\n<p>To use the Angular animations module, we import it in our <span class=\"lang:default highlight:0 decode:true crayon-inline\">app.module.ts<\/span>:<\/p>\n<pre class=\"lang:js decode:true \">import { BrowserModule } from \"@angular\/platform-browser\";\r\nimport { BrowserAnimationsModule } from\r\n  \"@angular\/platform-browser\/animations\";\r\nimport { NgModule } from \"@angular\/core\";\r\nimport { AppComponent } from \".\/app.component\";\r\n\r\n@NgModule({\r\n  declarations: [AppComponent],\r\n  imports: [\r\n    BrowserModule,\r\n    BrowserAnimationsModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {}<\/pre>\n<p>This is where we disable all Angular animations when a user prefers reduced motion. Instead of removing all animations in each component, we use a second animations module provided by Angular, the <span class=\"lang:js highlight:0 decode:true crayon-inline\">NoopAnimationsModule<\/span>. The <span class=\"lang:js highlight:0 decode:true crayon-inline \">NoopAnimationsModule<\/span>\u00a0still provides the style changes but does not animate at all, while still keeping track of animation event listeners.<\/p>\n<pre class=\"lang:js decode:true \">import { BrowserModule } from \"@angular\/platform-browser\";\r\nimport { NoopAnimationsModule } from\r\n  \"@angular\/platform-browser\/animations\";\r\nimport { NgModule } from \"@angular\/core\";\r\nimport { AppComponent } from \".\/app.component\";\r\n\r\n@NgModule({\r\n  declarations: [AppComponent],\r\n  imports: [\r\n    BrowserModule,\r\n    NoopAnimationsModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\n\r\nexport class AppModule {}<\/pre>\n<p>Now we have disabled all Angular animations by using the <span class=\"lang:js highlight:0 decode:true crayon-inline\">NoopAnimationsModule<\/span>. To provide animations depending on user preference, we have to load the one or the other animations module. In JavaScript, we have access to the media queries by using the <span class=\"lang:js highlight:0 decode:true crayon-inline\">matchMedia<\/span>\u00a0function:<\/p>\n<pre class=\"lang:js decode:true\">const disableAnimations = window.matchMedia(\r\n  \"(prefers-reduced-motion: reduce)\"\r\n).matches;<\/pre>\n<p>The <span class=\"lang:js highlight:0 decode:true crayon-inline \">matchMedia<\/span>\u00a0function returns an object with (among others) a boolean property <span class=\"lang:js highlight:0 decode:true crayon-inline\">matches<\/span>.<\/p>\n<p>To put it together, we disable Angular animations with these lines:<\/p>\n<pre class=\"lang:js decode:true \">import { BrowserModule } from \"@angular\/platform-browser\";\r\nimport { BrowserAnimationsModule } from \r\n  \"@angular\/platform-browser\/animations\";\r\nimport { NoopAnimationsModule } from\r\n  \"@angular\/platform-browser\/animations\";\r\nimport { NgModule } from \"@angular\/core\";\r\nimport { AppComponent } from \".\/app.component\";\r\n\r\n\/\/ detect whether the user prefers reduced motion\r\nconst disableAnimations: boolean = window.matchMedia(\r\n  \"(prefers-reduced-motion: reduce)\"\r\n).matches;\r\n\r\n@NgModule({\r\n  declarations: [AppComponent],\r\n  imports: [\r\n    BrowserModule,\r\n    \r\n    \/\/ conditionally load the AnimationsModule\r\n    disableAnimations \r\n      ? NoopAnimationsModule\r\n      : BrowserAnimationsModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {}<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"How-to-activate-the-reduced-motion-setting\"><\/span>How to activate the reduced motion setting<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In general, this is not a browser setting but a setting that you can activate on your device. The Mozilla Developer Network has a list of <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\/prefers-reduced-motion\">how to activate this setting<\/a> on various operating systems.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Removing-animations-or-reducing-animations\"><\/span>Removing animations or reducing animations?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As said before, animations can improve the user experience. Removing them entirely may not be a good idea. And we do not have to. The media query is called <span class=\"lang:css highlight:0 decode:true crayon-inline\">prefers-reduced-motion<\/span>, not <span class=\"lang:css highlight:0 decode:true crayon-inline \">prefers-no-motion<\/span>\u00a0nor <span class=\"lang:css highlight:0 decode:true crayon-inline\">does-absolutely-not-want-any-motion<\/span>. For each animation we can ask ourselves (or even better: our users) whether it adds to the user experience or is just a fancy but unnecessary effect.<\/p>\n<p>It is totally fine to keep some animations, especially when induced by a user action. When the user clicks a submit button but the form cannot be submitted because one field is not filled, it may be a good idea to draw attention to that field by, say, animating a box shadow. On the other hand, a pulsing icon trying to notify the user of a new feature that they might not be interested in seems to be an animation that could or should be removed.<\/p>\n<p>Instead of the radical solution presented above, we should act on a case-by-case basis. When we want to keep some valuable animations while removing those that might disturb some users (<a href=\"https:\/\/codepen.io\/gweax\/pen\/OJNdjEe\">see the example in action on codepen)<\/a>:<\/p>\n<pre class=\"lang:css decode:true\">\/* valuable transition *\/\r\ninput {\r\n  transition: box-shadow 0.3s ease-in-out;\r\n}\r\ninput:invalid {\r\n  box-shadow: 0 0 0.2em red;\r\n}\r\n\r\n\/* fancy animation, only for users without motion preference *\/\r\n@media (prefers-reduced-motion: no-preference) {\r\n  input {\r\n    transition:\r\n      box-shadow 0.3s ease-in-out,\r\n      transform 1s cubic-bezier(.29, 1.01, 1, -0.68);\r\n  }\r\n  input:invalid {\r\n    transform: rotate(720deg);\r\n  }\r\n}<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"What-about-older-browsers\"><\/span>What about older browsers?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Not all browsers support the <span class=\"lang:css highlight:0 decode:true crayon-inline \">prefers-reduced-motion<\/span>\u00a0media query. But that is fine. We can still use the media query, only those browsers will ignore it. We have two options:<\/p>\n<ol>\n<li>Disable animations generally and only add them on a case-by-case basis with <span class=\"lang:css highlight:0 decode:true crayon-inline\">@media (prefers-reduced-motion: no-preference)<\/span>. This way, users with older browsers do not get animations whether they want them or not.<\/li>\n<li>Disable animations only when explicitly set and supported with <span class=\"lang:css highlight:0 decode:true crayon-inline \">@media (prefers-reduced-motion: reduce)<\/span>. This way, users of older browsers may get animations even if they would rather not.<\/li>\n<\/ol>\n<p>To choose an option for your website, you have to ask yourself: How much do users benefit from animations? To which level do they disturb some users?<\/p>\n<p>And keep in mind: Old browsers often run on old computers. Disabling animations may improve performance and battery life.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion-and-outlook\"><\/span>Conclusion and outlook<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When building a website we should focus on the users and their needs and limitations. For users with a vestibular motion disorder, removing unneeded animations is one aspect of that. But motion on a website is not limited to CSS transitions and animations. To further improve the User Experience think of other parts:<\/p>\n<ul>\n<li>carousels<\/li>\n<li>gif emojis<\/li>\n<li>advertisement (you probably have no influence on that)<\/li>\n<li>auto-playing videos<\/li>\n<li>and more<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When building websites we not only try to deliver a solid, tested and maintainable solution, we also always strive for a great user experience. For some users who are troubled by motion when looking at websites this means restricting or even removing animations. This article shows to create a fitting solution.<\/p>\n","protected":false},"author":214,"featured_media":21162,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[128,131,70],"service":[444,445],"coauthors":[{"id":214,"display_name":"Matthias Reuter","user_nicename":"mreuter"}],"class_list":["post-27810","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-angular","tag-ui-ux","tag-web","service-frontend","service-ui-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Better User Experience: Removing Animations for People Troubled by Motion (CSS \/ Angular) - inovex GmbH<\/title>\n<meta name=\"description\" content=\"When building websites we not only try to deliver a solid, tested and maintainable solution, we also always strive for a great user experience. For some users who are troubled by motion when looking at websites this means restricting or even removing animations. This article shows to create a fitting solution.\" \/>\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.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Better User Experience: Removing Animations for People Troubled by Motion (CSS \/ Angular) - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"When building websites we not only try to deliver a solid, tested and maintainable solution, we also always strive for a great user experience. For some users who are troubled by motion when looking at websites this means restricting or even removing animations. This article shows to create a fitting solution.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-06T06:21:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-21T10:44:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/removing-animations-hero.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Matthias Reuter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/removing-animations-hero-1024x576.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matthias Reuter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Matthias Reuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/\"},\"author\":{\"name\":\"Matthias Reuter\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/e8781069af1705fa275e43092cf66796\"},\"headline\":\"Better User Experience: Removing Animations for People Troubled by Motion (CSS \\\/ Angular)\",\"datePublished\":\"2021-04-06T06:21:23+00:00\",\"dateModified\":\"2022-11-21T10:44:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/\"},\"wordCount\":1129,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/removing-animations-hero.png\",\"keywords\":[\"Angular\",\"UI\\\/UX\",\"Web\"],\"articleSection\":[\"Applications\",\"English Content\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/\",\"name\":\"Better User Experience: Removing Animations for People Troubled by Motion (CSS \\\/ Angular) - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/removing-animations-hero.png\",\"datePublished\":\"2021-04-06T06:21:23+00:00\",\"dateModified\":\"2022-11-21T10:44:18+00:00\",\"description\":\"When building websites we not only try to deliver a solid, tested and maintainable solution, we also always strive for a great user experience. For some users who are troubled by motion when looking at websites this means restricting or even removing animations. This article shows to create a fitting solution.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/removing-animations-hero.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/removing-animations-hero.png\",\"width\":1920,\"height\":1080,\"caption\":\"A variation of the accessibiliy icon\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/removing-animations-people-troubled-motion-css-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Better User Experience: Removing Animations for People Troubled by Motion (CSS \\\/ Angular)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inovexde\",\"https:\\\/\\\/x.com\\\/inovexgmbh\",\"https:\\\/\\\/www.instagram.com\\\/inovexlife\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inovex\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/e8781069af1705fa275e43092cf66796\",\"name\":\"Matthias Reuter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ace0c82d8a1a29cc63e8bc37b46558e4a432c9327e5f010b6add6faa5b1c095c?s=96&d=retro&r=gb7d7a4603daa6fd5bac67eb01b2b6e3d\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ace0c82d8a1a29cc63e8bc37b46558e4a432c9327e5f010b6add6faa5b1c095c?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ace0c82d8a1a29cc63e8bc37b46558e4a432c9327e5f010b6add6faa5b1c095c?s=96&d=retro&r=g\",\"caption\":\"Matthias Reuter\"},\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/author\\\/mreuter\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Better User Experience: Removing Animations for People Troubled by Motion (CSS \/ Angular) - inovex GmbH","description":"When building websites we not only try to deliver a solid, tested and maintainable solution, we also always strive for a great user experience. For some users who are troubled by motion when looking at websites this means restricting or even removing animations. This article shows to create a fitting solution.","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.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/","og_locale":"de_DE","og_type":"article","og_title":"Better User Experience: Removing Animations for People Troubled by Motion (CSS \/ Angular) - inovex GmbH","og_description":"When building websites we not only try to deliver a solid, tested and maintainable solution, we also always strive for a great user experience. For some users who are troubled by motion when looking at websites this means restricting or even removing animations. This article shows to create a fitting solution.","og_url":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2021-04-06T06:21:23+00:00","article_modified_time":"2022-11-21T10:44:18+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/removing-animations-hero.png","type":"image\/png"}],"author":"Matthias Reuter","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/removing-animations-hero-1024x576.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Matthias Reuter","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten","Written by":"Matthias Reuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/"},"author":{"name":"Matthias Reuter","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/e8781069af1705fa275e43092cf66796"},"headline":"Better User Experience: Removing Animations for People Troubled by Motion (CSS \/ Angular)","datePublished":"2021-04-06T06:21:23+00:00","dateModified":"2022-11-21T10:44:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/"},"wordCount":1129,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/removing-animations-hero.png","keywords":["Angular","UI\/UX","Web"],"articleSection":["Applications","English Content","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/","url":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/","name":"Better User Experience: Removing Animations for People Troubled by Motion (CSS \/ Angular) - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/removing-animations-hero.png","datePublished":"2021-04-06T06:21:23+00:00","dateModified":"2022-11-21T10:44:18+00:00","description":"When building websites we not only try to deliver a solid, tested and maintainable solution, we also always strive for a great user experience. For some users who are troubled by motion when looking at websites this means restricting or even removing animations. This article shows to create a fitting solution.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/removing-animations-hero.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/removing-animations-hero.png","width":1920,"height":1080,"caption":"A variation of the accessibiliy icon"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/removing-animations-people-troubled-motion-css-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Better User Experience: Removing Animations for People Troubled by Motion (CSS \/ Angular)"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/e8781069af1705fa275e43092cf66796","name":"Matthias Reuter","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/ace0c82d8a1a29cc63e8bc37b46558e4a432c9327e5f010b6add6faa5b1c095c?s=96&d=retro&r=gb7d7a4603daa6fd5bac67eb01b2b6e3d","url":"https:\/\/secure.gravatar.com\/avatar\/ace0c82d8a1a29cc63e8bc37b46558e4a432c9327e5f010b6add6faa5b1c095c?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ace0c82d8a1a29cc63e8bc37b46558e4a432c9327e5f010b6add6faa5b1c095c?s=96&d=retro&r=g","caption":"Matthias Reuter"},"url":"https:\/\/www.inovex.de\/de\/blog\/author\/mreuter\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/27810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/214"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=27810"}],"version-history":[{"count":1,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/27810\/revisions"}],"predecessor-version":[{"id":39445,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/27810\/revisions\/39445"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/21162"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=27810"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=27810"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=27810"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=27810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}