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

    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.



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

    For use directly in the browser via <script> tag:

      <!-- Element to contain animated typing -->
      <span id="element"></span>
      <!-- Load library from the CDN -->
      <script src=""></script>
      <!-- Setup and start animation! -->
        var typed = new Typed('#element', {
          strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
          typeSpeed: 50,
    Enter fullscreen mode Exit fullscreen mode

    As an ESModule

    For use with…

    Hope you guys have gained some Knowledge ✌️

Top comments (4)

adhirajbhatia profile image

Nice Post !

shahstavan profile image

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

sagarladla profile image
Sagar Ladla


shahstavan profile image