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"> </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
This Pen doesn't use any external CSS resources.