{"id":969,"date":"2022-06-27T15:40:21","date_gmt":"2022-06-27T15:40:21","guid":{"rendered":"https:\/\/digitaldocumentation.wustl.edu\/doc-central\/?page_id=760"},"modified":"2024-09-23T16:33:39","modified_gmt":"2024-09-23T16:33:39","slug":"animation","status":"publish","type":"page","link":"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/","title":{"rendered":"Animation"},"content":{"rendered":"\n<p class=\"is-style-lead\">The animation block allows you to add an animation to the page or post you are working on. The animation is essentially a short, muted video file hosted on VimeoPro account that will have some controls for users to pause movement.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>In the column to the right is an example of the animation block.<\/p>\n\n\n\n<p>Notice the pause controls in the bottom left corner for users to stop or start the looped video.<\/p>\n\n\n\n<p>Animations have no sound.<\/p>\n\n\n\n<p><strong>Note<\/strong>: Animations require custom work from the MarComm multimedia team. Should you require a new animation for your site, please reach out to the MarComm digital team. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-washu-animation\"><div class=\"video-wrapper\"><video playsinline muted loop autoplay class=\"video-element\" preload=\"metadata\" data-vid-hd=\"https:\/\/player.vimeo.com\/progressive_redirect\/playback\/816278215\/rendition\/360p\/file.mp4?loc=external&amp;signature=8cf245039975bbeb8776c92bdd6a0907c5b90e4397461ab65cb13960c34b78e9\" data-vid-sd=\"\"><source src=\"https:\/\/player.vimeo.com\/progressive_redirect\/playback\/816278215\/rendition\/360p\/file.mp4?loc=external&amp;signature=8cf245039975bbeb8776c92bdd6a0907c5b90e4397461ab65cb13960c34b78e9#t=0.1\" type=\"video\/mp4\"\/>Your browser doesn&#8217;t support the video tag.<\/video><div class=\"video-controls\"><button aria-label=\"Play\" class=\"btn-play\" style=\"display:none\"><svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns-xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 16 16\" xml:space=\"preserve\"><g id=\"Play\" transform=\"translate(15 15)\"><rect id=\"Rectangle_1618\" x=\"-15\" y=\"-15\" class=\"st0\" width=\"16\" height=\"16\"><\/rect><\/g><path class=\"st1\" d=\"M13.8,8.4l-11,7C2.4,15.6,2,15.4,2,15V1c0-0.4,0.4-0.6,0.8-0.4l11,7C14.1,7.8,14.1,8.2,13.8,8.4z\"><\/path><\/svg><\/button><button aria-label=\"Pause\" class=\"btn-pause\"><svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns-xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 16 16\" xml:space=\"preserve\"><path class=\"st0\" d=\"M5,16H2V0h3V16z M14,0h-3v16h3V0z\"><\/path><g id=\"Play\" transform=\"translate(15 15)\"><rect id=\"Rectangle_1618\" x=\"-15\" y=\"-15\" class=\"st1\" width=\"16\" height=\"16\"><\/rect><\/g><\/svg><\/button><\/div><\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to use the animation block<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<ol>\n<li>In the Page Editor, navigate to the area of the page where you want the block to display.<\/li>\n\n\n\n<li>Click on the Add block icon [+] and select\/search for\u00a0<strong>Animation<\/strong>\u00a0from the menu.<\/li>\n\n\n\n<li>Navigate to the right sidebar block editor, paste the url link to where your animation video is hosted.<\/li>\n\n\n\n<li>Animation blocks can be full-width or aligned to either side. They can also be placed in columns, as seen above.<\/li>\n<\/ol>\n\n\n\n<p><strong>We recommend having a Vimeo Pro account to be able to get a direct mp4 link. A normal Youtube embed won&#8217;t work in this block. Again, MarComm can help set this up for you.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The animation block allows you to add an animation to the page or post you are working on. The animation is essentially a short, muted video file hosted on VimeoPro account that will have some controls for users to pause movement. In the column to the right is an example of the animation block. Notice [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":567,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.14 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Animation - Global<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animation - Global\" \/>\n<meta property=\"og:description\" content=\"The animation block allows you to add an animation to the page or post you are working on. The animation is essentially a short, muted video file hosted on VimeoPro account that will have some controls for users to pause movement. In the column to the right is an example of the animation block. Notice [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/\" \/>\n<meta property=\"og:site_name\" content=\"Global\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-23T16:33:39+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/\",\"name\":\"Animation - Global\",\"isPartOf\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/global\/#website\"},\"datePublished\":\"2022-06-27T15:40:21+00:00\",\"dateModified\":\"2024-09-23T16:33:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/global\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blocks\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Animation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/global\/#website\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/global\/\",\"name\":\"Global\",\"description\":\"Just another digitaldocumentation.wustl.edu Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digitaldocumentation.wustl.edu\/global\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animation - Global","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Animation - Global","og_description":"The animation block allows you to add an animation to the page or post you are working on. The animation is essentially a short, muted video file hosted on VimeoPro account that will have some controls for users to pause movement. In the column to the right is an example of the animation block. Notice [&hellip;]","og_url":"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/","og_site_name":"Global","article_modified_time":"2024-09-23T16:33:39+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/","url":"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/","name":"Animation - Global","isPartOf":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/global\/#website"},"datePublished":"2022-06-27T15:40:21+00:00","dateModified":"2024-09-23T16:33:39+00:00","breadcrumb":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digitaldocumentation.wustl.edu\/global\/"},{"@type":"ListItem","position":2,"name":"Blocks","item":"https:\/\/digitaldocumentation.wustl.edu\/global\/blocks\/"},{"@type":"ListItem","position":3,"name":"Animation"}]},{"@type":"WebSite","@id":"https:\/\/digitaldocumentation.wustl.edu\/global\/#website","url":"https:\/\/digitaldocumentation.wustl.edu\/global\/","name":"Global","description":"Just another digitaldocumentation.wustl.edu Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digitaldocumentation.wustl.edu\/global\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Global","distributor_original_site_url":"https:\/\/digitaldocumentation.wustl.edu\/global","push-errors":false,"_links":{"self":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/global\/wp-json\/wp\/v2\/pages\/969"}],"collection":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/global\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/global\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/global\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/global\/wp-json\/wp\/v2\/comments?post=969"}],"version-history":[{"count":6,"href":"https:\/\/digitaldocumentation.wustl.edu\/global\/wp-json\/wp\/v2\/pages\/969\/revisions"}],"predecessor-version":[{"id":1237,"href":"https:\/\/digitaldocumentation.wustl.edu\/global\/wp-json\/wp\/v2\/pages\/969\/revisions\/1237"}],"up":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/global\/wp-json\/wp\/v2\/pages\/567"}],"wp:attachment":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/global\/wp-json\/wp\/v2\/media?parent=969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}