Typewriter Effect Text Animation

Typewriter effect text animation

update: Xcode 7.0 GM • Swift 2.0

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var myTypeWriter: UITextField!
    let myText = Array("Hello World !!!".characters)
    var myCounter = 0
    var timer:NSTimer?
    func fireTimer(){
        timer = NSTimer.scheduledTimerWithTimeInterval(0.5, target: self, selector: "typeLetter", userInfo: nil, repeats: true)
    }
    func typeLetter(){
        if myCounter < myText.count {
            myTypeWriter.text = myTypeWriter.text! + String(myText[myCounter])
            let randomInterval = Double((arc4random_uniform(8)+1))/20
            timer?.invalidate()
            timer = NSTimer.scheduledTimerWithTimeInterval(randomInterval, target: self, selector: "typeLetter", userInfo: nil, repeats: false)
        } else {
            timer?.invalidate()
        }
        myCounter++
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        fireTimer()
        // Do any additional setup after loading the view, typically from a nib.
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Making texts appear one by one (aka Typewriter effect) in Android Kotlin

A typewriter effect can be done in a single function quite simply using a coroutine, and then you can use it for any TextView without creating any properties.

fun TextView.typeWrite(lifecycleOwner: LifecycleOwner, text: String, intervalMs: Long) {
    this@typeWrite.text = ""
    lifecycleOwner.lifecycleScope.launch {
        repeat(text.length) {
            delay(intervalMs)
            this@typeWrite.text = text.take(it + 1)
        }
    }
}

Usage:

// In an Activity:
myTextView.typeWrite(this, "Hello, world!", 33L)

// In a Fragment:
myTextView.typeWrite(viewLifecycleOwner, "Hello, world!", 33L)

As for your own code, the first strategy won't work because you must not sleep on the UI thread. Your strategy is similar to mine above, except that delay() in a coroutine doesn't sleep the thread you launched it from, but instead suspends the coroutine. I don't see what's wrong with your second attempt, but it might be in code you didn't post. Not sure what you mean by "unreachable".

CSS - Typewriter effect with text always in the center

Set margin-left to 0 instead of auto.

/* GLOBAL STYLES */
body {  background: #333;  padding-top: 5em;  display: flex;  justify-content: center;}

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {  color: #fff;  font-family: monospace;  overflow: hidden;  /* Ensures the content is not revealed until the animation */  border-right: .15em solid orange;  /* The typwriter cursor */  white-space: nowrap;  /* Keeps the content on a single line */  margin: 0;  margin-right: auto;  /* Gives that scrolling effect as the typing happens */  letter-spacing: .15em;  /* Adjust as needed */  animation: typing 3.5s steps(30, end), blink-caret .5s step-end infinite;}

/* The typing effect */
@keyframes typing {  from {    width: 0  }  to {    width: 100%  }}

<div class="typewriter">  <h1>The cat and the hat.</h1></div>

Typewriter effect on text using JavaScript

The onload="" attribute does not work on a <p> element (see here). I'd suggest doing that in JavaScript instead:

var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;

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

document.addEventListener("DOMContentLoaded", typeWriter);

p   {
  color: Black;
  font-family: arial;
}

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

How to create text animation with typewritter effects using anime js?

The hardest part of this typing animation is offset calculation for cursor which can be easily done by using combination of HTMLElement.offsetLeft and HTMLElement.offsetWidth for each letter of the word.

const element = document.querySelector('.text-animation');
  const lettersHtml = element.textContent.replace(/\S/g, '<span class="letter">$&</span>');
  element.innerHTML = `<div class="letters">${lettersHtml}</div><span class="cursor"></span>`;
  element.style.display = 'block';

  const letters = Array.from(element.querySelectorAll('.letter'));
  const TYPE_AFTER_MS = 3_000;
  const JUMP_AFTER_MS = 250;

  const blink = anime({
    targets: '.text-animation .cursor',
    loop: true,
    duration: 750,
    opacity: [
      {value: [1, 1]},
      {value: [0, 0]}
    ],
  });

  anime.timeline({loop: true})
    .add({
      targets: '.text-animation .cursor',
      translateX: letters.map((letter, i) =>
        ({value: letter.offsetLeft + letter.offsetWidth, duration: 1, delay: i === 0 ? 0 : JUMP_AFTER_MS}))
    }, TYPE_AFTER_MS)
    .add({
      targets: '.text-animation .letter',
      opacity: [0, 1],
      duration: 1,
      delay: anime.stagger(JUMP_AFTER_MS),
      changeBegin: () => {
        blink.reset();
        blink.pause();
      },
      changeComplete: () => {
        blink.restart();
      }
    }, TYPE_AFTER_MS)
    .add({
      targets: '.text-animation',
      opacity: 0,
      duration: 1000,
      delay: 500,
      easing: 'easeOutExpo',
    });

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
}

.text-animation {
  display: none;
  position: relative;
  color: #f5f5f5;
  font-size: 50px;
  font-family: "Passion One", sans-serif;
  letter-spacing: 1px;
  line-height: 1;
}

.text-animation .letter {
  display: inline-block;
  opacity: 0;
}

.cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #f5f5f5;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<div class="text-animation">
  Welcome to codingflag
</div>

Automatic Typewriter effect in React Typescript

Forked into your codesandbox to recreate your issue.
You could have used styled-components i.e

import { styled } from "@mui/material/styles";

given from MUI to create styles same as Codepen Example.

Below is my solution -

https://codesandbox.io/s/automatic-typewriter-effect-stackoverflow-y546o7?file=/src/Typewriter.tsx

How to get CSS Typewriter effect working?

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>

How to go to new line in Type Writer effect?

style white-space: pre-line; needed.

let x = 0;
let textEffect = "Hi, \n I'm Dorothy, \n\ have a good day!.";
let container = document.getElementById("effect");

function animate() {
    if(x < textEffect.length){
        container.innerHTML += textEffect.charAt(x);
        x++;
        setTimeout(animate, 80);
    }
}
animate();

<div id="effect" style="white-space: pre-line;"></div>

---

Related Topics