{"id":1898,"date":"2018-10-11T13:44:19","date_gmt":"2018-10-11T13:44:19","guid":{"rendered":"http:\/\/clapat.ro\/themes\/grenada-wordpress\/?p=1898"},"modified":"2018-10-11T13:44:19","modified_gmt":"2018-10-11T13:44:19","slug":"the-ultimate-guide-to-proper-use-of-animation","status":"publish","type":"post","link":"https:\/\/bitsec.ge\/ka\/2018\/10\/11\/the-ultimate-guide-to-proper-use-of-animation\/","title":{"rendered":"The ultimate guide to proper use of animation"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>Nowadays it\u2019s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user\u2019s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven\u2019t come across any article where all rules concerning animation of interfaces would be clearly and practically described. Well, in this article I won\u2019t write anything new, I just want to collect all the main principles & rules in one place, so that other designers who want to start animating interfaces don\u2019t have to search for additional information.<\/p><br>\n\t\t<\/div>\n\t<\/div>\n<h4>Duration and speed of the animation<\/h4>\n\t<div class=\"wpb_raw_code wpb_content_element wpb_raw_html\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p>When elements change their state or position, the duration of the animation should be slow enough to give users the possibility to notice the change, but at the same time quick enough not to cause waiting.<\/p>\n                                \n                                <p>Numerous researches have discovered that optimal speed for interface animation is between 200 and 500 ms. These figures are based on the particular qualities of the human brain. Any animation shorter than 100 ms is instantaneous and won\u2019t be recognized at all. Whereas the animation longer than 1 second would convey a sense of delay and thus be boring for the user.<\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Nowadays it\u2019s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user\u2019s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I [...]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3,6],"tags":[19,20,21],"class_list":["post-1898","post","type-post","status-publish","format-standard","hentry","category-design","category-free","category-template","tag-portfolio","tag-psd","tag-showcase"],"_links":{"self":[{"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/posts\/1898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/comments?post=1898"}],"version-history":[{"count":0,"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/posts\/1898\/revisions"}],"wp:attachment":[{"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/media?parent=1898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/categories?post=1898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitsec.ge\/ka\/wp-json\/wp\/v2\/tags?post=1898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}