<head>
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
</head>

<div id="text=box">
  <div class='line1'> <p> this is text line one </p></div>
  <p class='line-2'> This is number 2 </p>
  <br/>
  <br/>
  <br/>
  <button> move </button>
  
<div class="typewriter">
  <h1> Hello World </h1>
</div>
  
.line1{
  position: absolute;
  left: 0px;
  opacity: 0.01;
}
.typewriter{
    width: 20%;
}
.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(25, end);
/*     blink-caret .75s step-end infinite; */
}
 
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
$(()=>{
  
   let $line1 = $('.line1');
   let $button = $('button');
  
  $button.on('click', ()=>{
    $line1.animate({
      left: '+=300',
      opacity: 1.0 }, 2000, 'linear');
    
    console.log('clicked');
  })
  
})
 
/// Also check this out 
// https://css-tricks.com/snippets/css/typewriter-effect/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.