viciouz

Site URL: https://www.pytch.co I'm trying to have this preloading animation for my website. Any ideas on how I can achieve this? https://codepen.io/jh3y/pen/VwLdVoZ I've already translated the HTML (PUG) to a HTML (see below). HTML <div class="scene" style="--hue: 260; --saturation: 69; --lightness: 58"> <div class="word"> <div class="letter__wrap" style="--index: 0"> <div class="letter" data-letter="L"><span class="letter__panel" aria-hidden="true">L</span><span class="letter__panel" aria-hidden="true">W</span><span class="letter__panel" aria-hidden="true">L</span><span class="letter__panel" aria-hidden="true">W</span><span class="letter__panel"></span></div> </div> <div class="letter__wrap" style="--index: 1"> <div class="letter" data-letter="o"><span class="letter__panel" aria-hidden="true">o</span><span class="letter__panel" aria-hidden="true">a</span><span class="letter__panel" aria-hidden="true">o</span><span class="letter__panel" aria-hidden="true">a</span><span class="letter__panel"></span></div> </div> <div class="letter__wrap" style="--index: 2"> <div class="letter" data-letter="a"><span class="letter__panel" aria-hidden="true">a</span><span class="letter__panel" aria-hidden="true">i</span><span class="letter__panel" aria-hidden="true">a</span><span class="letter__panel" aria-hidden="true">i</span><span class="letter__panel"></span></div> </div> <div class="letter__wrap" style="--index: 3"> <div class="letter" data-letter="d"><span class="letter__panel" aria-hidden="true">d</span><span class="letter__panel" aria-hidden="true">t</span><span class="letter__panel" aria-hidden="true">d</span><span class="letter__panel" aria-hidden="true">t</span><span class="letter__panel"></span></div> </div> <div class="letter__wrap" style="--index: 4"> <div class="letter" data-letter="i"><span class="letter__panel" aria-hidden="true">i</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel" aria-hidden="true">i</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel"></span></div> </div> <div class="letter__wrap" style="--index: 5"> <div class="letter" data-letter="n"><span class="letter__panel" aria-hidden="true">n</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel" aria-hidden="true">n</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel"></span></div> </div> <div class="letter__wrap" style="--index: 6"> <div class="letter" data-letter="g"><span class="letter__panel" aria-hidden="true">g</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel" aria-hidden="true">g</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel"></span></div> </div> </div> </div> and the CSS as well. * { box-sizing: border-box; transition: all 0.15s ease 0s; } :root { --movement: 0.85; --stop: 0.5; --duration: calc((var(--movement) * (1 / var(--stop)))); --stagger: 0.1125; --perspective: 500; --size: 50; --ease: cubic-bezier(1, -0.52, 0.26, 0.89); --bg: #e6e6e6; --panel: #fff; --color: #0d0d0d; --hue: 23; --saturation: 100; --lightness: 55; } @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --panel: #000; --color: #f2f2f2; } } body { align-items: center; background: var(--bg); display: flex; justify-content: center; min-height: 100vh; overflow: hidden; } .scene { perspective: calc(var(--perspective) * 1px); } .word { display: flex; transform: translate(calc(var(--size) * 0.7px), 0) rotateX(-30deg) rotateY(45deg); transform-style: preserve-3d; } .letter__wrap { animation: jump calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite; transform-origin: bottom center; transform-style: preserve-3d; } .letter__wrap .letter { animation: rotate calc(var(--duration) * 4s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite; } .letter { color: #00e350; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 2rem; font-weight: bold; height: calc(var(--size) * 1px); margin-right: calc(var(--size) * 0.2px); position: relative; text-transform: uppercase; transform-style: preserve-3d; width: calc(var(--size) * 1px); } .letter__panel { align-items: center; background: var(--panel); border: 3px #000 solid; display: flex; height: calc(var(--size) * 1px); justify-content: center; left: 50%; position: absolute; top: 50%; width: calc(var(--size) * 1px); } .letter__panel:nth-of-type(1) { transform: translate3d(-50%, -50%, 0) translate3d(0, 0, calc(var(--size) * 0.5px)); } .letter__panel:nth-of-type(2) { transform: translate3d(-50%, -50%, 0) rotateX(90deg) translate3d(0, 0, calc(var(--size) * 0.5px)); } .letter__panel:nth-of-type(3) { transform: translate3d(-50%, -50%, 0) rotateX(180deg) translate3d(0, 0, calc(var(--size) * 0.5px)); } .letter__panel:nth-of-type(4) { transform: translate3d(-50%, -50%, 0) rotateX(-90deg) translate3d(0, 0, calc(var(--size) * 0.5px)); } .letter__panel:nth-of-type(5) { transform: translate3d(-50%, -50%, 0) rotateY(-90deg) translate3d(0, 0, calc(var(--size) * 0.5px)); } @-moz-keyframes rotate { 0%, 30.625% { transform: rotateX(0deg); } 33.125%, 81.625% { transform: rotateX(90deg); } 83.125%, 100% { transform: rotateX(180deg); } } @-webkit-keyframes rotate { 0%, 30.625% { transform: rotateX(0deg); } 33.125%, 81.625% { transform: rotateX(90deg); } 83.125%, 100% { transform: rotateX(180deg); } } @-o-keyframes rotate { 0%, 30.625% { transform: rotateX(0deg); } 33.125%, 81.625% { transform: rotateX(90deg); } 83.125%, 100% { transform: rotateX(180deg); } } @keyframes rotate { 0%, 30.625% { transform: rotateX(0deg); } 33.125%, 81.625% { transform: rotateX(90deg); } 83.125%, 100% { transform: rotateX(180deg); } } @-moz-keyframes jump { 0%, 50%, 100% { transform: scaleX(1) scaleY(1) translate(0, 0); } 15% { transform: scaleX(1.2) scaleY(0.8) translate(0, 0); } 25% { transform: scaleX(0.9) scaleY(1.1) translate(0, -100%); } } @-webkit-keyframes jump { 0%, 50%, 100% { transform: scaleX(1) scaleY(1) translate(0, 0); } 15% { transform: scaleX(1.2) scaleY(0.8) translate(0, 0); } 25% { transform: scaleX(0.9) scaleY(1.1) translate(0, -100%); } } @-o-keyframes jump { 0%, 50%, 100% { transform: scaleX(1) scaleY(1) translate(0, 0); } 15% { transform: scaleX(1.2) scaleY(0.8) translate(0, 0); } 25% { transform: scaleX(0.9) scaleY(1.1) translate(0, -100%); } } @keyframes jump { 0%, 50%, 100% { transform: scaleX(1) scaleY(1) translate(0, 0); } 15% { transform: scaleX(1.2) scaleY(0.8) translate(0, 0); } 25% { transform: scaleX(0.9) scaleY(1.1) translate(0, -100%); } }