<h1 class="ml11">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">Hello minwt.com</span>
</span>
</h1>
.ml11 {
font-weight: 900;
font-size: 3.5em;
background:#000;
color:#fff;
padding:20px;
}
.ml11 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.1em;
padding-right: 0.05em;
padding-bottom: 0.15em;
}
.ml11 .line {
opacity: 0;
position: absolute;
left: 0;
height: 100%;
width: 3px;
background-color: #fff;
transform-origin: 0 50%;
}
.ml11 .line1 {
top: 0;
left: 0;
}
.ml11 .letter {
display: inline-block;
line-height: 1em;
}
// Wrap every letter in a span
$('.ml11 .letters').each(function(){
$(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});
anime.timeline({loop: true})
.add({
targets: '.ml11 .line',
scaleY: [0,1],
opacity: [0.5,1],
easing: "easeOutExpo",
duration: 700
})
.add({
targets: '.ml11 .line',
translateX: [0,$(".ml11 .letters").width()],
easing: "easeOutExpo",
duration: 700,
delay: 100
}).add({
targets: '.ml11 .letter',
opacity: [0,1],
easing: "easeOutExpo",
duration: 600,
offset: '-=775',
delay: function(el, i) {
return 34 * (i+1)
}
}).add({
targets: '.ml11',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
This Pen doesn't use any external CSS resources.