Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by T_S

  1. Hello


    I've added a typewriter effect on my homepage. The animation seems to be working well but the transition between sentences is a bit slow. Is there a way to reduce the amount of time a sentence remains on the screen before getting deleted & the next one getting typed?


    For example, at the moment, after 'More Sales.'  is typed out, the sentence remains on screen for about 5 seconds before it gets deleted and the next sentence is typed out. How do I reduce this to 1.5 or 2 seconds?


    This is the code I've used:


    //Home page text animation//
    @keyframes text1 {0%,25%,50%,75%,100% {
    width: 0;} 1%,24% {width: 5.5em;}
    @keyframes text2 {0%,25%,50%,75%,100% {width: 0;} 26%, 49% {width: 8em;}
    @keyframes text3 {0%,25%,50%,75%,100% {width: 0;} 51%,74% {width: 5.5em;}
    @keyframes text4 {0%,25%,50%,75%,100% {width: 0;} 76%,99% {width: 6em;}
    .text_1 {animation: text1;}
    .text_2 {animation: text2;}
    .text_3 {animation: text3;}
    .text_4 {animation: text4;}
    .text_1, .text_2, .text_3, .text_4 {
      overflow: hidden;
      white-space: nowrap;
      display: inline-block;
      position: relative;
      animation-duration: 20s;
      animation-timing-function: steps(10, end);
      animation-iteration-count: infinite;
    .text_1::after, .text_2::after, .text_3::after, .text_4::after {
      content: "|";
      position: absolute;
      right: 0;
      animation: caret infinite;
      animation-duration: 1s;
      animation-timing-function: steps(1, end);


    Thank you!


  • 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.