Skip to content
Typing effect that prevents elements from jumping around when the text becomes multiline
JavaScript CSS
Branch: master
Clone or download
Latest commit 4871db6 Aug 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Initial commit Aug 9, 2019
tests Initial commit Aug 9, 2019
.eslintrc Initial commit Aug 9, 2019
.gitignore Initial commit Aug 9, 2019
LICENSE Initial commit Aug 9, 2019
README.md updated readme Aug 10, 2019
gulpfile.js Initial commit Aug 9, 2019
index.css Initial commit Aug 9, 2019
index.js Initial commit Aug 9, 2019
package-lock.json Initial commit Aug 9, 2019
package.json v1.0.1 Aug 10, 2019

README.md

typing effect

typing-effect creates a typing effect for one or multiple elements. Other libraries usually append character by character, which causes other elements on the page to jump around, most of the times when the animated text becomes multiline. This library avoids that by keeping the text in the DOM, wrapping every character and hiding it. That way you can also center the text and every character will already be at its final position in the viewport. When the animation is done, everything will be resetted and the wrappers are removed.

Demo

https://mgrsskls.github.io/typing-effect

Installation

npm install typing-effect or yarn install typing-effect

Options

{
  speed: 30,  // the typing speed
  delay: 300, // the delay between two animated elements,
  reset: true // defines if the animated text gets replaced with the original text when the animation is done
}

Usage

Include index.css from this library into your project or add the following CSS

[data-typing-effect] {
  visibility: hidden;
}

and add the data-typing-effect attribute to the elements you want to animate.

typing-effect would still work without, but you might be able to see the animated text for a small moment before the animation starts.

import type from "typing-effect";

// a single element
type(document.querySelector("[data-typing-effect]"));

// multiple elements
type(Array.from(document.querySelectorAll("[data-typing-effect]")));

// passing options
type(
  Array.from(document.querySelectorAll("[data-typing-effect]"), {
    speed: 50,
    delay: 50,
    reset: false
  })
);

// doing something when the animation is done:
type(
  Array.from(document.querySelectorAll("[data-typing-effect]")).then(() =>
    doSomething()
  )
);

NOTE: If the text moves a bit when the animation is done, you can use { reset: false }.

You can’t perform that action at this time.