text crop anim

by phloe

HTML

<div id="frame" class="frame-0">
  <div class="box">
    <h1>Time to crop<br/> that leading</h1>
  </div>
</div>

<button>step</button>

CSS

body {
  font-family: helvetica;
  background-color: #DDD;
}
.box {
  border: 20px solid #FFF;
	background-color: #FFF;
	min-height: 200px;
  transition: border-color .3s ease-in-out;
}

h1 {
  margin: 0;
  font-size: 4em;
}

h1::before {
  content: "";
	display: block;
	margin-top: calc(var(--margin) * -1);
	margin-bottom: -13px;
	--margin: 13px;
	background: cyan;
	height: 13px;
	transition: opacity .3s ease-in-out, margin-top .3s ease-in-out;
	--margin: 0;
	opacity: 0;
}


.frame-1 .box {
  border-color: #FBD;
}

.frame-2 .box {
  border-color: #FBD;
}
.frame-2 h1::before {
	opacity: 0.65;
}

.frame-3 .box {
  border-color: #FBD;
}
.frame-3 h1::before {
	opacity: 0.65;
	--margin: 13px;
}


.frame-4 h1::before {
	--margin: 13px;
}

JavaScript

let frameNum = 0;

document.querySelector("button").addEventListener("click", progress);

function progress () {
	frameNum += 1;
	frameNum %= 5;
  
  frame.className = `frame-${frameNum}`;
}