{"id":162,"date":"2020-01-10T19:07:00","date_gmt":"2020-01-10T19:07:00","guid":{"rendered":"https:\/\/potatodie.nl\/diffuse-write-ups\/?p=162"},"modified":"2020-09-22T20:31:34","modified_gmt":"2020-09-22T20:31:34","slug":"animation-on-pageload","status":"publish","type":"post","link":"https:\/\/potatodie.nl\/diffuse-write-ups\/animation-on-pageload\/","title":{"rendered":"Animation on page load"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">To bring a webpage to life, you may want to start an animation when the content of the page appears. For example, a text or an image fades in, or moves to certain position, or grows to a certain size, etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Animation kick-off<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a basic method to kick off a page load transition, using JavaScript to change  the <code>classList<\/code> property of the root element, which then results in changing  the style of an element.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step by step<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">First, add a one-line script in the head of the document that adds the class <code>preparation<\/code> (for instance) to the root element, <code>&lt;html><\/code>.  <\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-js\">\n      JS    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1064356636\" \n    id=\"codemirror-1064356636\"\n  >document.documentElement.classList.add(&#039;preparation&#039;);<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1064356636'), {\n      mode: 'javascript',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: false,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">We&#8217;ll use this class to style the begin state of the animated element. It is important that the change of the class list is executed before any content is rendered, so the element is styled to the begin state of the animation before it appears on the screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Say we want an article to simply fade in. We set opacity to zero for the begin state:<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-css\">\n      CSS    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-514443267\" \n    id=\"codemirror-514443267\"\n  >.preparation article {\n    opacity: 0;\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-514443267'), {\n      mode: 'css',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: false,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Here is the CSS for the end state and the transition:<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-css\">\n      CSS    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1352793148\" \n    id=\"codemirror-1352793148\"\n  >article {\n    opacity: 1;\n    transition: opacity 300ms ease-in;\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1352793148'), {\n      mode: 'css',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: false,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">We just need to remove the class <code>preparation<\/code> from the <code>html<\/code> tag, and the show begins!<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-js\">\n      JS    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-715125752\" \n    id=\"codemirror-715125752\"\n  >window.onload = function() {\n    document.documentElement.classList.remove(&#039;preparation&#039;);\n};<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-715125752'), {\n      mode: 'javascript',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: false,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Degrading gracefully<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If JavaScript is not available, the element class list is not affected.  In that case the preparation of the animation is skipped and the user will just see the end state. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The same is true if the <code>classList<\/code> API is not available (IE11).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If JavaScript and <code>classList<\/code> are<em> <\/em>available the following &#8211; somewhat simpler &#8211; approach would give the same result as above:<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-css\">\n      CSS    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1434453158\" \n    id=\"codemirror-1434453158\"\n  >article {\n    opacity: 0;\n    left: -100%;\n    transition: opacity 300ms ease-in;\n}\n\n.show-time article {\n    opacity: 1;\n    left: 0;\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1434453158'), {\n      mode: 'css',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: false,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-js\">\n      JS    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1330391771\" \n    id=\"codemirror-1330391771\"\n  >window.onload = function() {\n    document.documentElement.classList.add(&#039;show-time&#039;);\n};<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1330391771'), {\n      mode: 'javascript',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: false,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In the absence of JavaScript though, the user would never get to see the content.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To bring a webpage to life, you may want to start an animation when the content of the page appears. For example, a text or an image fades in, or moves to certain position, or grows to a certain size, etc.<br \/>\nHere is a basic method to kick off a page load transition<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,8,20,7],"tags":[],"class_list":["post-162","post","type-post","status-publish","format-standard","hentry","category-animation","category-css","category-javascript","category-web-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/comments?post=162"}],"version-history":[{"count":7,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/162\/revisions"}],"predecessor-version":[{"id":767,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/162\/revisions\/767"}],"wp:attachment":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/media?parent=162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/categories?post=162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/tags?post=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}