DEV Community


Posted on

Terminal Animation for your website using Typed.js

Web Development

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:

    GitHub logo mattboldt / typed.js

    A JavaScript Typing Animation Library

    Build Status Code Climate GitHub release npm GitHub license

    Live Demo | View All Demos | View Full Docs |

    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.


    Choose One

    npm install typed.js
    yarn add typed.js
    bower install typed.js


    <script src=""></script>
    Enter fullscreen mode Exit fullscreen mode


    This is really all you need to get going.

    // Can also be included with a regular script tag
    import Typed from 'typed.js';
    var options = {
      strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
      typeSpeed: 40
    var typed = new Typed('.element', options);
    Enter fullscreen mode Exit fullscreen mode

    Use with ReactJS

    Hook-based function component:

    Class component:

    Use with Vue.js

    Check out the Vue.js component:

    Use it as WebComponent


    Hope you guys have gained some Knowledge ✌️

Discussion (4)

adhirajbhatia profile image

Nice Post !

shahstavan profile image
Mr.Shah Author

Thanks Biro✌️
If you want to learn Django you can even check out my website 🤘

sagarladla profile image
Sagar Ladla


shahstavan profile image
Mr.Shah Author