DEV Community

Mr.Shah
Mr.Shah

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 | 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.


    Installation

    Choose One

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

    CDN

    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
    Enter fullscreen mode Exit fullscreen mode

    Setup

    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: https://jsfiddle.net/mattboldt/60h9an7y/

    Class component: https://jsfiddle.net/mattboldt/ovat9jmp/

    Use with Vue.js

    Check out the Vue.js component: https://github.com/Orlandster/vue-typed-js

    Use it as WebComponent

    Check…


    Hope you guys have gained some Knowledge ✌️

Discussion (4)

Collapse
adhirajbhatia profile image
AdhirajBhatia

Nice Post !

Collapse
shahstavan profile image
Mr.Shah Author

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

Collapse
sagarladla profile image
Sagar Ladla

Ahaa!

Collapse
shahstavan profile image
Mr.Shah Author

😎🤘