{"id":107,"date":"2022-07-26T14:08:16","date_gmt":"2022-07-26T18:08:16","guid":{"rendered":"http:\/\/wpdocs.bu.edu\/bu-stories\/?page_id=107"},"modified":"2022-08-08T15:23:48","modified_gmt":"2022-08-08T19:23:48","slug":"animations","status":"publish","type":"page","link":"https:\/\/wpdocs.bu.edu\/bu-stories\/best-practices\/animations\/","title":{"rendered":"Animations"},"content":{"rendered":"\n<p>Animations help make static images more dynamic and engaging. You can animate background images with Ken Burns-style effects like zooming and panning. Additionally, text can also be animated with fade-ins and other effects.<\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<p><strong>DO<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"414\" height=\"736\" src=\"\/bu-stories\/files\/2022\/07\/do_animation_AdobeExpress.gif\" alt=\"\" class=\"wp-image-194\"\/><figcaption>The animations on the text and background image help make the content more dynamic and interesting.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p><strong>DON&#8217;T<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"575\" height=\"1024\" src=\"\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-5.14.36-PM-575x1024.png\" alt=\"\" class=\"wp-image-192\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-5.14.36-PM-575x1024.png 575w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-5.14.36-PM-357x636.png 357w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-5.14.36-PM-768x1368.png 768w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2022\/07\/Screen-Shot-2022-07-26-at-5.14.36-PM.png 778w\" sizes=\"(max-width: 575px) 100vw, 575px\" \/><figcaption>This page works, but it could be more engaging with subtle animation and movement.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Use animations sparingly, as animations can become distracting if overused. Try switching up different animations throughout the pages within a story to add variety, otherwise it can start to feel expected.<\/p>\n\n\n\n<h2>Timing matters<\/h2>\n\n\n\n<p>You can adjust the duration of animations on background images. Panning on a background image should last a minimum of 5 seconds, but not too long as to slow down the pacing.<\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<p><strong>DO<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"412\" height=\"733\" src=\"\/bu-stories\/files\/2022\/07\/slow_animation_AdobeExpress.gif\" alt=\"\" class=\"wp-image-196\"\/><figcaption>This Ken Burns effect on the background image is subtle and makes the experience more immersive.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p><strong>DON&#8217;T<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"412\" height=\"733\" src=\"\/bu-stories\/files\/2022\/07\/fast_animate_AdobeExpress.gif\" alt=\"\" class=\"wp-image-197\"\/><figcaption>The Ken Burns effect is a little too fast here. If too quick, the motion can be distracting and makes it harder to focus on the text.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2>Meaningful animations<\/h2>\n\n\n\n<p>Use animation sparingly and meaningfully. There are a variety of animation styles available in BU Stories, but be careful animations you apply don&#8217;t distract from the content or tone. Some animations are better suited for stickers or gifs rather than text.<\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<p><strong>DO<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"412\" height=\"733\" src=\"\/bu-stories\/files\/2022\/07\/slow_animation_AdobeExpress.gif\" alt=\"\" class=\"wp-image-196\"\/><figcaption>Fading in the copy text is a subtle effect that helps add interest, making the page more dynamic.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p><strong>DON&#8217;T<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"412\" height=\"733\" src=\"\/bu-stories\/files\/2022\/07\/bad_animate_AdobeExpress.gif\" alt=\"\" class=\"wp-image-201\"\/><figcaption>This rotation animation doesn\u2019t add value to the story. Instead, it distracts the reader.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Animations help make static images more dynamic and engaging. You can animate background images with Ken Burns-style effects like zooming and panning. Additionally, text can also be animated with fade-ins and other effects. DO DON&#8217;T Use animations sparingly, as animations can become distracting if overused. Try switching up different animations throughout the pages within a [&hellip;]<\/p>\n","protected":false},"author":3324,"featured_media":0,"parent":95,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/107"}],"collection":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/users\/3324"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":8,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/107\/revisions"}],"predecessor-version":[{"id":234,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/107\/revisions\/234"}],"up":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/95"}],"wp:attachment":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/media?parent=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}