YouTube Originals Intro

index.html

<div id="green-filter"></div>
<div id="top-gradient" class="gradient"></div>
<div id="bottom-gradient" class="gradient"></div>
<div id="logo-wrapper">
  <div id="logo">
    <div id="logo-border" class="absolute-centered"></div>
    <div id="logo-border-inner" class="absolute-centered"></div>
    <div id="logo-text">
      <div id="hulu-text" class="zen-dots-font">hulu</div>
      <div id="originals-text" class="jakarta-sans-font">ORIGINALS</div>
    </div>
  </div>
</div>
<button id="restart-button" class="rubik-font" type="button">Restart</button>  

script.js

const hulu = new SplitText("#hulu-text"),
      originals = new SplitText("#originals-text");

const t1 = new gsap.timeline();

t1.from(["#top-gradient", "#bottom-gradient"], 0.7, { ease: "power3.inOut", filter: "blur(0px)", opacity: 0 })
  .from("#green-filter", 0.8, { opacity: 0, scale: 3 }, "-=50%")
  .to("#green-filter", 0.25, { opacity: 0, scale: 3 })
  .to(["#top-gradient", "#bottom-gradient"], 0.3, { filter: "blur(0px)", opacity: 0 }, "-=100%")
  .set("#logo", { opacity: 1 })
  .from(hulu.chars, 0.2, { ease: "back", filter: "blur(0.3em)", opacity: 0, scale: 1.5, stagger: 0.02 })
  .from(originals.chars, 0.2, { delay: 0.25, filter: "blur(0.3em)", opacity: 0, scale: 0.5, stagger: 0.02, xPercent: -25 })
  .from("#logo-border", 0.4, { ease: "power3.out", opacity: 0, scale: 0.75 }, "-=100%")
  .from("#logo-border-inner", 0.4, { ease: "power3.out", scale: 0.75 }, "-=100%")
  .to("#logo", 1.5, { scale: 1.1 }, "-=20%")
  .to(["#logo-border", "#logo-border-inner"], 1.5, { ease: "power3.out", scale: 1.1 }, "-=100%")
  .to("#logo-border", 1.25, { ease: "power4.in", scale: 8 }, "-=50%")
  .to("#logo-border-inner", 0.5, { ease: "power4.in", scale: 8 }, "-=60%")
  .to("#logo", 0.25, { opacity: 0, scale: 1.2 }, "-=50%");

document.getElementById("restart-button").onclick = () => t1.restart();

scripts

<script src="https://assets.codepen.io/16327/SplitText3.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

style.css

:root {
  --background-color: rgb(10, 10, 10);  
  --hulu-color: rgb(27, 219, 124);
  
  --gradient-green-rgb: 32, 147, 127;
  --gradient-blue-rgb: 127, 117, 237;
  --gradient-violet-rgb: 171, 111, 218;
  
  --highlight-blue-rgb: 45, 37, 143;
}

body{
  align-items: center;
  background-color: var(--background-color);
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0px;
  overflow: hidden;
  padding: 0px;
  width: 100vw;
}

.absolute-centered {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.jakarta-sans-font {
  font-family: "Plus Jakarta Sans", sans-serif;
}

.zen-dots-font {
  font-family: "Zen Dots", cursive;
}

.rubik-font {
  font-family: "Rubik", sans-serif;
  font-weight: 500;
}

#restart-button {
  backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px;
  bottom: 10px;
  color: white;
  cursor: pointer;
  font-size: 0.9em;
  left: 50%;
  outline: none;
  padding: 10px 20px;
  position: absolute;
  transform: translateX(-50%);
  z-index: 100;
  
}

#restart-button:hover,
#restart-button:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

#green-filter {
  background: radial-gradient(rgba(var(--gradient-green-rgb), 0.05), rgba(var(--gradient-green-rgb), 0.4) 80%);
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 1;
}

.gradient {
  filter: blur(3em);
  height: 80px;
  left: -5%;
  position: absolute;
  width: 110%;
}

#top-gradient {
  background: linear-gradient(
    to right, 
    rgba(var(--gradient-blue-rgb), 0.75) 0% 10%,  
    transparent 10% 20%,
    rgba(var(--gradient-violet-rgb), 0.5) 20% 50%, 
    rgba(var(--gradient-blue-rgb), 0.5) 50% 70%, 
    rgba(var(--gradient-green-rgb), 0.75) 70%
  );
  top: -50px;
}

#bottom-gradient {
  background: linear-gradient(
    to right, 
    rgba(var(--gradient-blue-rgb), 0.75) 0% 10%,  
    transparent 10% 30%,
    rgba(var(--gradient-blue-rgb), 0.5) 30% 50%, 
    transparent 50% 70%,
    rgba(var(--gradient-violet-rgb), 0.5) 70% 80%, 
    transparent 80%
  );
  bottom: -50px;
}

#logo-wrapper {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

#logo {
  opacity: 0;
  position: relative;
  z-index: 2;
}

#logo-border {
  background-color: var(--hulu-color);
  border-radius: 2.25em;
  height: 160%;
  width: 140%;
  z-index: 1;
}
  
#logo-border-inner {
  background-color: var(--background-color);
  border-radius: 2em;
  height: calc(160% - 0.5em);
  width: calc(140% - 0.5em);
  z-index: 2;
}

#logo-text {
  position: relative;
  z-index: 3;
}

#hulu-text {
  color: var(--hulu-color);
  font-size: 8em;
  height: 120px;
  line-height: 120px;
}

#originals-text {
  color: white;
  font-size: 3em;
  letter-spacing: 0.12em;
}
    
@keyframes bounce {
  from, 3.33%, 8.83%, 16.66% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  6.66%, 7.16% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.1);
  }

  11.66% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -7px, 0) scaleY(1.05);
  }

  13.33% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  15% {
    transform: translate3d(0, -2px, 0) scaleY(1.02);
  }
}

@media(max-width: 800px) {
  #logo-wrapper {
    transform: scale(0.7);
  }
}

@media(max-width: 600px) {  
  #restart-button {
    left: auto;
    right: 10px;
    transform: none;
  }
}

youtube-originals-intro.markdown

Hulu Originals Intro

A Pen by Hyperplexed on CodePen.

License.