DEV Community

Mr.Shah

Posted on Oct 10, 2021

Terminal Animation for your website using Typed.js

#css #html #webdev #javascript

Many times when we come through some interesting thing such as animations or Transitions we are eager to know how to implement it in real practice.

I came to know many developers are using Terminal Animations for their website why should I help Beginner Web Developers to implement it for their website.

Besides, you can also add other stuffs in animations like:

startDelay: 0 - [startDelay time before typing starts in milliseconds]
shuffle: false - [shuffle the strings]

loopCount: Infinity - [Amount of loops]

For more you can checkout this GitHub Repo:

mattboldt / typed.js

A JavaScript Typing Animation Library

Live Demo | View All Demos | View Full Docs | mattboldt.com

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

Licensing

GPL-3.0 License	Limited Commercial License	Unlimited Commercial License
Free for use on personal and open source projects View License	For use on a single commercial project Purchase License View License	For use on unlimited commercial projects Purchase License View License

GPL-3.0 License

Limited Commercial License

Unlimited Commercial License

Free for use on personal and open source projects

View License

For use on a single commercial project

Purchase License

View License

For use on unlimited commercial projects

Purchase License

View License

Installation

For use with a build tool like Vite, and/or in a React application, install with NPM or Yarn.

NPM

npm install typed.js

Yarn

yarn add typed.js

General ESM Usage

import Typed from 'typed.js';
const typed = new Typed('#element', {
  strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
  typeSpeed: 50,
})