KPC
Kevin Powell - Community•2y ago
Pat66

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 : 
 <div class="title">
                           <p>
                            <span>w</span>
                            <span>e</span>
                            <span>&nbsp;</span>
                            <span>a</span>
                            <span>r</span>
                            <span>e</span>
                            <span>&nbsp;</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>&nbsp;</span>
                            <span>a</span>
                            <span>r</span>
                            <span>e</span>
                            <span>&nbsp;</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 ?
Patrick L
CodePen
KKrKbML
...
6 Replies
Chris Bolson
Chris Bolson•2y ago
You have got 12 characters but have only customized the animation on 8 of them so the last 3 (plus the fist one) are using the default delay that you have set and are therefore animating in at the same time. Just to clarify, you are using the child selectors from 2 to 8, these include your “empty” spans which probably don’t really need animating. You probably meant to animate children 2, 4,5,,6, 8,9,10,11,12
Pat66
Pat66OP•2y ago
Hi Chris I change my code now the last letter appear before
Pat66
Pat66OP•2y ago
Chris Bolson
Chris Bolson•2y ago
It's just a matter of identifiying which children, you are nearly there. Try this: 
.title p span:nth-child(2){ /* E */
    animation-delay:.6s;
}
.title p span:nth-child(4){ /* A */
    animation-delay:1s;
}
.title p span:nth-child(5){ /* r */
    animation-delay:1.2s;
}
.title p span:nth-child(6){ /* E */
    animation-delay:1.4s;
}
.title p span:nth-child(8){ /* L */
    animation-delay:1.7s;
}
.title p span:nth-child(9){ /* A */
    animation-delay:1.9s;
}
.title p span:nth-child(10){   /* X */
     animation-delay:2s;
    }
.title p span:nth-child(11){ /* E */
    animation-delay:2.5s;
}

.title p span:nth-child(12){   /* R */
    animation-delay:2.7s;
   }
.title p span:nth-child(2){ /* E */
    animation-delay:.6s;
}
.title p span:nth-child(4){ /* A */
    animation-delay:1s;
}
.title p span:nth-child(5){ /* r */
    animation-delay:1.2s;
}
.title p span:nth-child(6){ /* E */
    animation-delay:1.4s;
}
.title p span:nth-child(8){ /* L */
    animation-delay:1.7s;
}
.title p span:nth-child(9){ /* A */
    animation-delay:1.9s;
}
.title p span:nth-child(10){   /* X */
     animation-delay:2s;
    }
.title p span:nth-child(11){ /* E */
    animation-delay:2.5s;
}

.title p span:nth-child(12){   /* R */
    animation-delay:2.7s;
   }
alternatively you could give a class name to each of the letters and define the delay by class name rather than nth-child but this should work and requires less html markup I know we discussed it before but this line: animation-delay: calc(2.5s + 4.5s + 5s/2 300ms + 1.9s); is not doing anything as the calculation is invalid
Pat66
Pat66OP•2y ago
Chris you are awesome great
Jochem
Jochem•2y ago
pretty sure you need spaces between the operators, so 5s / 2 and there's no operator between 5s / 2 and 300ms
Want results from more Discord servers?
Add your server