fade text from a word | javascript

i am trying to work on this javascript, where when the page loads, i need the text "Hello World" to zoom on page load, and it should pause for 3 seconds, and then when it zooms out, it should retain only "H" from hello and "W" from world. So when it zooms out, only H and W will go back to a position.

  window.onload = function() {

         // 3. Page load completes - the text "hello",
// has come to center with zoom 800%
$("#hello").animate({
  zoom: "350%",
  left: window.innerWidth / 2
}, 3000, function() {
  // 4. Pause for 3 seconds
  $(this).delay(3000)
  // 6. zooms out to 200% heading towards left top corner,
  // (logo position) 
  // 7. Fades out when reaching the logo 8. Logo appears
  .animate({
    zoom: "100%",
    left:0
  }, 3000, function() {
    $(this).fadeOut()
  })
})
         };


<div id="hello">
  <h1 style="zoom: 200%; transition: zoom 1s ease-in-out;">Hello World</h1>
</div>