body
  main
    hr.vertical.left.white-bkg
    hr.top.horizontal.brite-teal-bkg
    h1 Animated Text
    hr.horizontal.bottom.orange-bkg
    hr.vertical.right.white-bkg
View Compiled
$color1: #112F41;
$color2: #068587;
$color3: #0CDEBE;
$color4: #FFFFFF;
$color5: #ED553B;

.teal-bkg{
  background-color: $color2;
}
.navy-bkg{
  background-color: $color1;
}

.brite-teal-bkg{
  background-color: $color3;
}

.white-bkg{
  background-color: $color4;
}

.orange-bkg{
  background-color: $color5;
}

html, body{
  margin: 0;
  padding: 0;
  height: 100vh;
}

body {
  background-color: $color1;
}

main {
  display: grid;
  grid-template-columns: 1fr 5px auto 5px 1fr;
  grid-template-rows: 1fr auto 1fr;
  grid-column-gap:10px;
  grid-row-gap:10px;
  height: 100vh;
  overflow:hidden;
background: radial-gradient(ellipse at center, rgba(255,255,255,.1) 0%,rgba(229,229,229,0) 100%);

}

h1{
  grid-row: 2/3;
  grid-column: 3/4;
  font-family: sans-serif;
  color: $color4;
  font-size: 8vw;
  margin: 0;
  align-self: end;
}

hr{
  height: 5px;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: inset 2px 0 2px rgba(0,0,0, 1)
}

hr.left, hr.right{
 height: 100%;
}

hr.left{
  grid-column: 2/3;
  grid-row: 1/3;
}

hr.right{
  grid-column: 4/5;
  grid-row: 2/4;
}

hr.top{
    grid-column: 3/-1;
    grid-row: 1/2;
    align-self: end;
}

hr.bottom{
    grid-column: 1/-3;
    grid-row: 3/4;
    align-self: start;
  }

//required for staggered text animation
span {
  display: inline-block;
}
View Compiled
//control individual characters
const title = document.getElementsByTagName('h1')[0]
.innerText
.split("")
.map((e,i)=> e != " " ? `<span class="char">${e}</span>` : `<span class="space">&nbsp;</span>` )
.join("");

document.getElementsByTagName('h1')[0].innerHTML = title

let title2 = document.getElementsByTagName('h1')[0];
var tl = new TimelineMax();

tl.staggerFrom('h1 .char', 1, {
        autoAlpha: 0,
        scale: 50,
        cycle:{
          x: randomPos,
          y: randomPos,
        },
        rotation: -1080,
        ease: Power4.easeOut,
      }, .1, "heading")
  .staggerFrom('.horizontal', 1, {
      cycle: {x:[2000, -2000],},
      ease: Power3.easeOut,
      }, 0, "heading+=1.25", "horizontal")
  .staggerFrom('.vertical', 1, {
      cycle: {
        y:[-2000, 2000],
      },
      ease: Power4.easeOut,
      }, 0, "horizontal-=0.9")

// To do 
// *stagger disappear from both ends
// *animate right/left lines to center
// *rotate lines & collapse
/*   .staggerTo('h1 .char', .2, {
      autoAlpha: 0,
      ease: Power4.easeOut,
   }, -0.1, "staggerHide")

.staggerTo('h1 .char', .2, {
      autoAlpha: 0,
      ease: Power4.easeOut,
   }, 0.1, "staggerHide")
  .to('.right', .2, {
    x: $('window').innerheight / 2,
    }, "staggerHide")*/

function randomPos(i){   
  let val = (Math.random() * 1000) * (i+1);
  val *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
  return val;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineMax.min.js