SquareRefresh: Rise Up

#1. First, use this code to Code Injection > Header

<!-- Rise Up Square Refresh -->
<style>
body{opacity:0;-webkit-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}body.rise-up-loaded{opacity:1}.rise-up{overflow:hidden;opacity:1!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important;-webkit-transition:none!important;-o-transition:none!important;-moz-transition:none!important;transition:none!important}.rise-up-word{display:inline-block;opacity:0}
</style>
<!-- Rise Up Square Refresh -->

#2. Next, use this code to Code Injection > Footer

You’ll still see an external link here, but it’s hosted by Cloudflare itself, so you can rest assured it will remain active for a long time without being deleted.

<!-- Rise Up Square Refresh -->
<script>
function riseUp(e){if(!e)throw new Error("No options passed to Rise Up constructor");if(!e.elements||!Array.isArray(e.elements)||0===e.elements.length)throw new Error("No element option passed to Rise Up constructor");var t=e.offset&&"number"==typeof e.offset?e.offset:70,n=e.duration&&"number"==typeof e.duration?e.duration:.8,o=e.delay&&"number"==typeof e.delay?e.delay:.15;function r(e){var r=new TimelineMax;Math.round(window.innerHeight*t/100)>e.getBoundingClientRect().top&&!e.classList.contains("active")&&(e.classList.add("active"),r.staggerFromTo(e.querySelectorAll(".rise-up-word"),n,{opacity:0,skewX:45,y:"102%"},{opacity:1,skewX:0,y:"0%",ease:Power2.easeOut},o))}function i(e){if(e){e.classList.add("rise-up");var t=e.querySelector("a"),n=t||e,o=t?t.getAttribute("href"):null,i=n.textContent.trim().split(/\s+/).filter((function(e){return e.length>0})).map((function(e){return o?'<div class="rise-up-word"><a href="'+o+'" data-no-animation="">'+e+"&nbsp;</a></div>":'<div class="rise-up-word">'+e+"&nbsp;</div>"})).join("");e.innerHTML=i,window.addEventListener("load",(function(){r(e)}),!1),window.addEventListener("scroll",(function(){r(e)}),!1)}}e.elements.forEach((function(e){document.querySelectorAll(e).forEach(i)})),window.addEventListener("DOMContentLoaded",(function(){document.body.classList.add("rise-up-loaded")}))}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script>
  new riseUp({
    elements: ["h1"], // Final text tag or class of rising elements
    duration: 0.8, // Duration of animation in seconds
    delay: 0.1, // Rise delay between words in seconds
    offset: 80, // Element show from offset top of screen
  });
</script>
<!-- Rise Up Square Refresh -->

#3. Follow Step Three in SquareRefresh