Animation of text reveal letter by letter
Hi everyone
I had a text reveal effect on the firdt text "we are laxer"
the problem is the last letter appear before the middle letter
my html code :
my CSS:
my codepen:
https://codepen.io/alpha_66/pen/KKrKbML
cna I have some idea ?
I had a text reveal effect on the firdt text "we are laxer"
the problem is the last letter appear before the middle letter
my html code :
<div class="title">
<p>
<span>w</span>
<span>e</span>
<span> </span>
<span>a</span>
<span>r</span>
<span>e</span>
<span> </span>
<span>l</span>
<span>a</span>
<span>x</span>
<span>e</span>
<span>r</span>
</p>
</div> <div class="title">
<p>
<span>w</span>
<span>e</span>
<span> </span>
<span>a</span>
<span>r</span>
<span>e</span>
<span> </span>
<span>l</span>
<span>a</span>
<span>x</span>
<span>e</span>
<span>r</span>
</p>
</div>my CSS:
.title{
width: 100%;
height: 200px;
overflow: hidden;
z-index: 4;
margin:45px auto;
}
.title p span{
display: inline-block;
font-size:12vw;
text-transform: capitalize;
white-space:pre;
font-weight: 300;
line-height: 1;
letter-spacing:- .2em;
transform: translateY(150%);
padding-left:5px;
animation: slideUp 4.5s cubic-bezier(0.075,0.82,0.165,1) forwards;
animation-delay: calc(2.5s + 4.5s + 5s/2 300ms + 1.9s);
}
.title p span:nth-child(2){
animation-delay:.6s;
}
.title p span:nth-child(3){
animation-delay:1s;
}
.title p span:nth-child(4){
animation-delay:1.2s;
}
.title p span:nth-child(5){
animation-delay:1.4s;
}
.title p span:nth-child(6){
animation-delay:1.7s;
}
.title p span:nth-child(7){
animation-delay:1.9s;
}
.title p span:nth-child(8){
animation-delay:2s;
}
.title p span:nth-child(9){
animation-delay:2.9s;
}
@keyframes slideUp{
to{
transform: translateY(0);
}
}.title{
width: 100%;
height: 200px;
overflow: hidden;
z-index: 4;
margin:45px auto;
}
.title p span{
display: inline-block;
font-size:12vw;
text-transform: capitalize;
white-space:pre;
font-weight: 300;
line-height: 1;
letter-spacing:- .2em;
transform: translateY(150%);
padding-left:5px;
animation: slideUp 4.5s cubic-bezier(0.075,0.82,0.165,1) forwards;
animation-delay: calc(2.5s + 4.5s + 5s/2 300ms + 1.9s);
}
.title p span:nth-child(2){
animation-delay:.6s;
}
.title p span:nth-child(3){
animation-delay:1s;
}
.title p span:nth-child(4){
animation-delay:1.2s;
}
.title p span:nth-child(5){
animation-delay:1.4s;
}
.title p span:nth-child(6){
animation-delay:1.7s;
}
.title p span:nth-child(7){
animation-delay:1.9s;
}
.title p span:nth-child(8){
animation-delay:2s;
}
.title p span:nth-child(9){
animation-delay:2.9s;
}
@keyframes slideUp{
to{
transform: translateY(0);
}
}my codepen:
https://codepen.io/alpha_66/pen/KKrKbML
cna I have some idea ?
