How to get CSS Typewriter effect working?

Question

I am trying to add typewriter effect to some text on a webpage, however, it is not working as intended. Since this question is about animation I have given small video (only 5-6 sec) links bellow.

How do I make that cursor stop from going further than it needs to be ? See Here
This animation starts as soon as I open the website, but this section in in the middle of the webpage so the user is not able to see that animation.See here
This does not adjust itself, when viewed it mobile. So what should I do so that it automatically get smaller with small screen (keeping the whole text in the same line). See here

.pcb-text p {
  font-size: 60px;
  animation: type-writer-effect 3s steps(56), blink-caret 0.85s step-end infinite;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  border-right: .12em solid orange;
  / width: 28ch;
}

@keyframes type-writer-effect {
  0% {
    text-align: center;
    width: 0ch;
  }
  100% {
    width: 28ch;
  }
}


/* 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>

There's multiple questions in here that would take time to address. For a bit cleaner animation you might check out a [different pen](https://codepen.io/chris-w/pen/jONMWVj), for the making it play when viewed you'll need custom JS or a library like [WowJs](https://wowjs.uk/) is handy for that, and for responsiveness you'll just use media queries or size units like `em` / `rem` etc. Sorry don't have free time to complete your task entirely though. — Chris W., Aug 25 '20 at 16:33
regarding #2, see: [Activate CSS3 animation when the content scrolls into view](https://stackoverflow.com/questions/16325679/activate-css3-animation-when-the-content-scrolls-into-view). — Woodrow Barlow, Aug 25 '20 at 16:58

score 1 · Answer 1 · answered Aug 25 '20 at 16:49

This would be the effect with JS

<!DOCTYPE html>
<html>
<body>

<button onclick="typeWriter()">Click me</button>

<p id="demo"></p>

<script>
var i = 0;
var txt = 'Physics, Chemistry, Biology.';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
</script>

</body>
</html>

To call the effect when your element is visible you can do something like that with jQuery:

var has_fired;
$("html").on("scroll", function () {
    if (!has_fired && $(this).scrollTop() >= $("#yourElement").offset().top) {
        typeWriter()
        has_fired = true; // use this if only want fired once
    }
});

If you want to use a CSS animation you can check out: https://css-tricks.com/snippets/css/typewriter-effect/

You can start the CSS animation just like the JS animation

var has_fired;
$("html").on("scroll", function () {
    if (!has_fired && $(this).scrollTop() >= $("#yourElement").offset().top) {
        $("#yourElement").addClass("animation-class");
        has_fired = true; // use this if only want fired once
    }
});

score 1 · Accepted Answer · answered Aug 25 '20 at 16:49

In order to avoid your problem, you need to set flex rules for the parent .pcb-text, and also, in keyframes, change it to the transition - from{} and to{}.

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

.pcb-text p {
  font-size: 60px;
  animation: typing 3s steps(56), blink-caret 0.85s step-end infinite;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  border-right: .12em solid orange;
}



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

@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>

score 1 · Answer 3 · answered Aug 25 '20 at 17:06

First of all, if you want the animation to start when the user scrolls to the section in which it exists you're going to need a java-script (you can use jQuery too) code like the one in this link.

Secondly in order to have different font sizes in different screens, I would prefer to use Bootstrap but if you're not familiar with Bootstrap, you may use CSS media queries like below:

@media only screen and (max-width: 600px) {
.pcb-text p {
    text-align: center;
    font-size: 20px;
    animation: type-writer-effect 3s steps(56), blink-caret 0.85s step-end infinite;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    border-right: .12em solid orange;
  }
}

@media only screen and (min-width: 601px) {
.pcb-text p {
     text-align: center;
     font-size: 60px;
     animation: type-writer-effect 3s steps(56), blink-caret 0.85s step-end infinite;
     overflow: hidden;
     white-space: nowrap;
     margin: 0 auto;
     border-right: .12em solid orange;
     width: 28ch;
   }
}

These two media queries are written for two screen sizes (screens with width of 600 pixels or less and screens with with of 601 pixels or more). You can expand these for your own needs.

Finally for the cursor I have to say that as you do not know the width of you p tag in advance, it's a nice idea to put it inside a div and set the width of the p tag to 100%. In this case the cursor will not move to the end as p tags by default get 100% of the width of their container tags. But to find the exact width of the p tag (which is the length of it), you'd better use a java-script code like below:

<script>
    var text = document.getElementById("myParagraph").innerText;
    var textLength = text.trim().length;
    //Then set the length of your div which holds the p tag equal to textLength considering the number of pixel each character takes in your chosen font-size
</script>

What Sergey has recommended is correct but if you're not familiar with flex or bootstrap, you could still reach what you want with the use of CSS percentages and media queries — Naser.Sadeghi, Aug 25 '20 at 17:15

How to get CSS Typewriter effect working?

3 Answers3