Animate elements if visible in viewport

Question

I have added a typewriter effect on some text on a webpage, however that section is in middle of the page. And the animation starts as soon as someone visits the page so the user is not able to see that animation. I have used only CSS for that animation and used Bootstrap for the webpage. I am not that familiar with JavaScript and was facing problem implementing solutions provided on the internet. I would really appreciate if you look into it and help me out.

CSS

<style>.pcb-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 600px) {
  .pcb-text p {
    font-size: 20px;
    animation: typing 3s steps(56), blink-caret 0.85s step-end infinite;
    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 */
    border-right: .12em solid orange;
    /* The typewriter cursor */
    /*width: 28ch; !*To stop cursor from going further right than necessary *!*/
  }
}

@media only screen and (min-width: 601px) {
  .pcb-text p {
    font-size: 60px;
    animation: typing 3s steps(56), blink-caret 0.85s step-end infinite;
    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 */
    border-right: .12em solid orange;
    /* The typewriter cursor */
    /*width: 28ch; !*To stop cursor from going further right than necessary *!*/
  }
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

</style>

<div class="pcb-text">
  <div class="text-center">
    <p>Physics, Chemistry, Biology.</p>
  </div>
</div>

Answer 1

Here is a basic example that will wait 5 seconds before starting the animation.

setTimeout(function() {
  // Wait 5 seconds, then add class.
  document.querySelector(".pcb-text p").classList.add("start");
}, 5000);

.pcb-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 600px) {
  .pcb-text p.start {
    font-size: 20px;
    animation: typing 3s steps(56), blink-caret 0.85s step-end infinite;
    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 */
    border-right: .12em solid orange;
    /* The typewriter cursor */
    /*width: 28ch; !*To stop cursor from going further right than necessary *!*/
  }
}

@media only screen and (min-width: 601px) {
  .pcb-text p.start {
    font-size: 60px;
    animation: typing 3s steps(56), blink-caret 0.85s step-end infinite;
    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 */
    border-right: .12em solid orange;
    /* The typewriter cursor */
    /*width: 28ch; !*To stop cursor from going further right than necessary *!*/
  }
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

<div class="pcb-text">
  <div class="text-center">
    <p>Physics, Chemistry, Biology.</p>
  </div>
</div>

You will need to consider if you will look at ScrollTop or another Event or Trigger. You may consider a basic class that formats the majority of the element and then add an animation class when it's time to start the animation. This way you can make the text be hidden or unseen until the trigger event.

You could also do it with jQuery. CSS will be less complex, yet you might get a more desirable typing effect.

$(function() {
  function typeText(o) {
    // Collect Content of Object
    var txt = o.text();
    // Clear content of Object
    o.html("");
    var i = 0;
    // Interval to which to add a character
    var c = setInterval(function() {
      o.append(txt[i++]);
      if ((i > txt.length) || (o.width() + 20 > $(window).width())) {
        // Stop at the end
        clearInterval(c);
      }
    }, 100);
  }

  typeText($(".pcb-text p"));
});

.pcb-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 600px) {
  .pcb-text p {
    font-size: 20px;
    animation: blink-caret 0.85s step-end infinite;
    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 */
    border-right: .12em solid orange;
    /* The typewriter cursor */
    /*width: 28ch; !*To stop cursor from going further right than necessary *!*/
  }
}

@media only screen and (min-width: 601px) {
  .pcb-text p {
    font-size: 60px;
    animation: blink-caret 0.85s step-end infinite;
    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 */
    border-right: .12em solid orange;
    /* The typewriter cursor */
    /*width: 28ch; !*To stop cursor from going further right than necessary *!*/
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pcb-text">
  <div class="text-center">
    <p>Physics, Chemistry, Biology.</p>
  </div>
</div>