Jump to content

Preloading Animation

By viciouz, in Customize with code

Recommended Posts

viciouz Level 1

viciouz

Posted
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%);
  }
}
 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

tuanphan Level 17

tuanphan

Posted
Posted

Try adding this to Code Injection > Footer 


<div class="scene" style="--hue: 260; --saturation: 92; --lightness: 62">
  <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>
<style>
  :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 {
  -webkit-animation: jump calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite;
          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 {
  -webkit-animation: rotate calc(var(--duration) * 4s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite;
          animation: rotate calc(var(--duration) * 4s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite;
}
.letter {
  color: var(--color);
  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: 5px hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%)) 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));
}
@-webkit-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);
  }
}
@-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%);
  }
}
@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%);
  }
}

</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources