Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 add https://mgrsskls.github.io/typing-effect/typing-effect.js to your project if you don't want to use the ES6 module.

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 typingEffect from "typing-effect"; // when not using https://mgrsskls.github.io/typing-effect/typing-effect.js

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

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

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

// doing something when the animation is done:
typingEffect(
  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 }.

About

Typing effect that prevents elements from jumping around when the text becomes multiline

Topics

Resources

License

Packages

No packages published