Preloading Animation in Customize with code Posted November 2, 2021 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%); } }
Preloading Animation
in Customize with code
Posted
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%);
}
}