Typewriter effects (iframe)

Ask the community
,
1

Hi all,

I am currently using the method found on https://youtu.be/R7_UTBL91RQ?si=hJ8rkUWnG1tTeIf3. However, I would like to ask how do I modify the code, so that it does not do the backspacing and instead print each new line for each typeString?

<style>
  /* Global */
  html {
    min-height: 100%;
    overflow: hidden;
  }

/*--------- TEXT SETTINGS ---------*/
  body {
    height: calc(100vh - 8em);
    color: #fff;
    font-family: "Helvetica";
    font-size: 16vw!important;
    background-color: transparent;
  }
/*--------- TEXT SETTINGS ---------*/
      
  .line-1 {
    position: relative;
    top: 50%;
    width: 24em;
    margin: 0 auto;
    border-right: 1px solid rgba(255, 255, 255, 0.75);
    font-size: 50%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
  }

  /* Animation */
  .anim-typewriter {
    animation: typewriter 2s steps(44) 1s 1 normal both,
      blinkTextCursor 500ms steps(44) 0 infinite normal;
    -webkit-animation: typewriter 2s steps(44) 1s 1 normal both,
      blinkTextCursor 500ms steps(44) 0 infinite normal;
    -moz-animation: typewriter 2s steps(44) 1s 1 normal both,
      blinkTextCursor 500ms steps(44) 0 infinite normal;
    -o-animation: typewriter 2s steps(44) 1s 1 normal both,
      blinkTextCursor 500ms steps(44) 0 infinite normal;
  }

  @keyframes typewriter {
    from {
      width: 0;
    }

    to {
      width: 24em;
    }
  }

  @-webkit-keyframes typewriter {
    from {
      width: 0;
    }

    to {
      width: 24em;
    }
  }

  @-moz-keyframes typewriter {
    from {
      width: 0;
    }

    to {
      width: 24em;
    }
  }

  @-o-keyframes typewriter {
    from {
      width: 0;
    }

    to {
      width: 24em;
    }
  }

  @keyframes blinkTextCursor {
    from {
      border-right-color: rgba(255, 255, 255, 0.75);
    }

    to {
      border-right-color: transparent;
    }
  }

  @-webkit-keyframes blinkTextCursor {
    from {
      border-right-color: rgba(0, 0, 0, 0.75);
    }

    to {
      border-right-color: transparent;
    }
  }

  @-moz-keyframes blinkTextCursor {
    from {
      border-right-color: rgba(255, 255, 255, 0.75);
    }

    to {
      border-right-color: transparent;
    }
  }

  @-o-keyframes blinkTextCursor {
    from {
      border-right-color: rgba(255, 255, 255, 0.75);
    }

    to {
      border-right-color: transparent;
    }
  }
</style>

Regards