Jump to content

Typewriter Animation Second Line

Recommended Posts

Hello! 

I've added in a code block and custom css for the typewriter effect on a 2 line statement. However i'm running into the issue where the second line stays visible in the beginning, the text types out for line 1 and then it will type it out for line 2. I'd like line 2 to remain hidden and actually flow like it is being typed out after line 1 has been typed. 

 

PW is Nolan.

 

Here is the CSS code I used: 

.typewriter p {
  white-space: nowrap;
  overflow: hidden;
}
.typewriter p:nth-child(1) {
  /*If you are having problems with text clipping change the width from 16em to a higher value*/
  width: 23em;
  -webkit-animation: type 5s steps(40, end);
  animation: type 5s steps(40, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.typewriter p:nth-child(2) {
    /*If you are having problems with text clipping change the width from 13.5em to a higher value*/
  width: 23em;
  opacity: 0;
  -webkit-animation: type2 5s steps(40, end);
  animation: type2 5s steps(40, end);
  -webkit-animation-delay: 3s;
  animation-delay: 5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }

  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    border: none;
  }
}

  .typewriter {color:#2b2b2b; 
  font-size: 18px;
  line-height: 18px;
  padding-top: 20px
}
 

Edited by CFlo1
Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 3/20/2023 at 10:15 PM, CFlo1 said:

Hi Tuan! 

I tried a different code which is working better, but i'm struggling with cursors now. The cursor for the first line is staying visible after it finishes typing. 

URL: https://springtail-okra-de6s.squarespace.com/

PW: nolan 

Sorry I thought it added the url, apparently didn't! 

You mean this cursor?

image.png.3ef33c6243f8105201e2cb51e79ed707.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/18/2023 at 1:23 AM, CFlo1 said:

Hello! 

I've added in a code block and custom css for the typewriter effect on a 2 line statement. However i'm running into the issue where the second line stays visible in the beginning, the text types out for line 1 and then it will type it out for line 2. I'd like line 2 to remain hidden and actually flow like it is being typed out after line 1 has been typed. 

 

PW is Nolan.

 

Here is the CSS code I used: 

.typewriter p {
  white-space: nowrap;
  overflow: hidden;
}
.typewriter p:nth-child(1) {
  /*If you are having problems with text clipping change the width from 16em to a higher value*/
  width: 23em;
  -webkit-animation: type 5s steps(40, end);
  animation: type 5s steps(40, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.typewriter p:nth-child(2) {
    /*If you are having problems with text clipping change the width from 13.5em to a higher value*/
  width: 23em;
  opacity: 0;
  -webkit-animation: type2 5s steps(40, end);
  animation: type2 5s steps(40, end);
  -webkit-animation-delay: 3s;
  animation-delay: 5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }

  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    border: none;
  }
}

  .typewriter {color:#2b2b2b; 
  font-size: 18px;
  line-height: 18px;
  padding-top: 20px
}
 

This is all code? Do you use any custom <script> code?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.