I’ve seen two guides posted to Medium about animation in the last month that have seriously blown up! <\/p>\n
There is a lot to learn in each one! The demonstration animations they use are wonderfully well done and each guide demonstrates an interesting and effective animation technique, often paired next to a less successful technique to drive the point home. They are both heavily focused on Material Design<\/a> though, which is fine, but I think Val Head said it best<\/a>:<\/p>\n Google wrote material design for branding Google things. When you use material design on things that aren\u2019t Google, you\u2019re kind of using Google\u2019s branding on a thing that is not Google, and that\u2019s weird. Material design is Google\u2019s opinion on motion. It\u2019s Google\u2019s branding opinion on motion. It\u2019s not a de facto standard of how motion should happen.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":" I’ve seen two guides posted to Medium about animation in the last month that have seriously blown up! Taras Skytskyi’s The ultimate guide to proper use of animation in UX Jonas Naimark’s Motion design doesn\u2019t have to be hard There is a lot to learn in each one! The demonstration animations they use are wonderfully […]<\/p>\n","protected":false},"author":3,"featured_media":277223,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"A couple of excellent UX guides on using motion.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[612,632],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/animation.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":255880,"url":"https:\/\/css-tricks.com\/repeatable-staggered-animation-three-ways-sass-gsap-web-animations-api\/","url_meta":{"origin":277220,"position":0},"title":"Repeatable, Staggered Animation Three Ways: Sass, GSAP and Web Animations API","date":"July 4, 2017","format":false,"excerpt":"Staggered animation, also known as \"follow through\" or \"overlapping action\" is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book \"The Illusion of Life\". At its core, the concept deals with animating objects in delayed succession to produce fluid\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":250282,"url":"https:\/\/css-tricks.com\/come-event-apart\/","url_meta":{"origin":277220,"position":1},"title":"You Should Come To An Event Apart","date":"February 9, 2017","format":false,"excerpt":"Hey there CSS-Tricks readers and friends! This year I have the great privilege to be giving talks and workshops at the wonderful An Event Apart series of conferences. Conference for people who make websites, as they say. You should come to one that works out well with your work and\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/01\/30079261666_7ebab58acb_z.jpg?fit=640%2C512&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":188912,"url":"https:\/\/css-tricks.com\/things-chrome-dev-summit-2014\/","url_meta":{"origin":277220,"position":2},"title":"A Few Things from Chrome Dev Summit 2014","date":"November 21, 2014","format":false,"excerpt":"I got to spend the last two days at the Chrome Dev Summit (Thanks Paul Kinlan for inviting me!) I made some notes of a few things that caught my eye. There was a brief mention of the manifest.json file, which I had never heard of. Apparently it's a Chrome\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":245674,"url":"https:\/\/css-tricks.com\/web-animation-workshops\/","url_meta":{"origin":277220,"position":3},"title":"Web Animation Workshops","date":"September 19, 2016","format":false,"excerpt":"I\u2019m thrilled to announce a brand new workshop series I\u2019m starting with Val Head about web animation! We\u2019ll be taking two-day workshop around to different cities starting this November, starting with Austin and New York. Whether you\u2019re a beginner or you\u2019ve been diving into animation already, this course won\u2019t just\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":249663,"url":"https:\/\/css-tricks.com\/animation-design-systems\/","url_meta":{"origin":277220,"position":4},"title":"Animation in Design Systems","date":"January 4, 2017","format":false,"excerpt":"Our own Sarah Drasner: Unlike fonts, colors, and so on, we tend to add animation in as a last step, which leads to disorganized implementations that lack overall cohesion. If you asked a designer or developer if they would create a mockup or build a UI without knowing the fonts\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":320684,"url":"https:\/\/css-tricks.com\/accessible-web-animation-the-wcag-on-animation-explained\/","url_meta":{"origin":277220,"position":5},"title":"Accessible Web Animation: The WCAG on Animation Explained","date":"September 22, 2020","format":false,"excerpt":"It\u2019s true, web animation can be accessible! Sometimes it just takes a little extra effort to make sure that it is. There are strategic things we can do to make sure our animations have a positive impact on accessibility, like planning how they contribute to the overall UX and ease\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/Untitled_Artwork.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/animation.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/277220"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=277220"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/277220\/revisions"}],"predecessor-version":[{"id":277258,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/277220\/revisions\/277258"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/277223"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=277220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=277220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=277220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}