Kevin Powell - Community•13mo ago

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•13mo 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•13mo ago

Hi Chris I change my code now the last letter appear before

Pat66•13mo ago

https://codepen.io/alpha_66/pen/KKrKbML

Patrick L

CodePen

KKrKbML

...

Chris Bolson•13mo 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•13mo ago

Chris you are awesome great

Jochem•13mo ago

pretty sure you need spaces between the operators, so 5s / 2 and there's no operator between 5s / 2 and 300ms

Gaming

Programming

Animation of text reveal letter by letter