Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexmacarthur/typeit

The most versatile JavaScript typewriter effect library on the planet.
https://github.com/alexmacarthur/typeit

animation javascript javascript-library text-animation text-effects typewriter typewriter-effect typography

Last synced: 4 days ago
JSON representation

The most versatile JavaScript typewriter effect library on the planet.

Awesome Lists containing this project

README 

        
# TypeIt



The Most Versatile JavaScript Animated Typing Utility on the Planet



[![Bundle Size](https://badgen.net/bundlephobia/minzip/typeit)](https://bundlephobia.com/result?p=typeit)

[![npm downloads](https://img.shields.io/npm/dm/typeit.svg?style=flat-square)](http://npm-stat.com/charts.html?package=typeit)

[![](https://data.jsdelivr.com/v1/package/npm/typeit/badge)](https://www.jsdelivr.com/package/npm/typeit)

[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Falexmacarthur%2Ftypeit&via=amacarthur&text=Check%20out%20TypeIt%2C%20the%20most%20versatile%20JavaScript%20animated%20typing%20utility%20on%20the%20planet.&hashtags=js%2Cwebdev%2Coss)





    




## Overview



TypeIt is the most versatile JavaScript typewriter effect utility on the planet. With its simple yet flexible configuration, you're empowerd to type single or multiple strings that break lines, delete & replace each other, easily handle string containing HTML, loop, and a whole lot more.



For more advanced, controlled typing effects, TypeIt comes with companion functions that can be chained to control your typing down to a single character or millisecond, enabling you to type an dynamic narrative, with complete reign over speed changes, line breaks, deletions, and pauses.



## Key Features



-   Offers a beautiful, fluent API for chaining commands in order to fine-tune an effect.

-   Choose to start typing only when your target element becomes visible on the screen.

-   Loop your string(s) continuously.

-   Define strings programmatically or directly in the HTML (a useful fallback in case user doesn't have JavaScript enabled, as well as for SEO).

-   Handle HTML (even nested tags!) with ease, preserving all of its attributes (classes, ids, etc.).

-   Offered as an ES module for modern bundlers, or a UMD library for loading via a traditional `` tags.



## License Options



Using TypeIt for an open source or personal project is completely free is licensed under [GPLv3](https://www.gnu.org/licenses/quick-guide-gplv3.html). To use it in a commercial project, however, a paid license is required. Learn more about them here:



-   Single Commercial License - [Purchase Here](https://typeitjs.com/checkout/limited)

-   Extended Commercial License - [Purchase Here](https://typeitjs.com/checkout/unlimited)



## Demos



See some more examples and try out the sandbox at [https://typeitjs.com](https://typeitjs.com).



## Documentation



All of TypeIt's documentation can be found at [https://typeitjs.com/docs](https://typeitjs.com/docs).



## Included Packages



- [typeit](./packages/typeit) - The original, vanilla JavaScript library.

- [typeit-react](./packages/typeit-react) - A simple React package wrapping the vanilla library.



## Contribute



Please do! Check out the [CONTRIBUTING.md](https://github.com/alexmacarthur/typeit/blob/master/CONTRIBUTING.md) file to see how to get started.



## Know of a Neat Site Using TypeIt?



I'd love to see and share it! [Send me a message](https://macarthur.me/contact) or [tweet at me.](https://www.twitter.com/amacarthur)



## Need Help?



If you're working with a custom implementation of TypeIt and would like some help, I'm available for hire. [Get in touch!](https://macarthur.me/contact)