Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/krasimir/type-commander
Programmable typing animation
https://github.com/krasimir/type-commander
Last synced: 3 days ago
JSON representation
Programmable typing animation
- Host: GitHub
- URL: https://github.com/krasimir/type-commander
- Owner: krasimir
- License: mit
- Created: 2019-01-10T13:18:18.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-01-12T15:37:10.000Z (almost 6 years ago)
- Last Synced: 2024-11-07T04:05:33.098Z (6 days ago)
- Language: JavaScript
- Homepage: https://poet.codes/e/QMX5eZWJ1S7
- Size: 84 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Type-commander - a programmable typing animation tool
I've made this as an alternative of [Typed.js](https://mattboldt.com/demos/typed-js/). I also tried couple of other ones but they also didn't meet my needs. This library is quite small and it does the same typing animation. Except that it offers full control on where the cursor is, how many characters are added or deleted and what is the delay between the different operations.
[Demo https://poet.codes/e/QMX5eZWJ1S7](https://poet.codes/e/QMX5eZWJ1S7#code.js)
*Pros*
* Full control on what and where is typed.
* Speed control
* Looping
* 3.5KB
* Dependency-free
*Cons*
* No styling
* No multi-line text
---
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
- [`TypeCommander(, , )`](#typecommanderselector-initial-text-cursor-options)
- [`.delay(
## Installation
```
npm install type-commander
```
or directly use
[https://unpkg.com/type-commander](https://unpkg.com/type-commander)
## Usage
```html
```
```js
const tc = TypeCommander('#content');
tc
.delay(3000)
.add('Hello world!').delay(2000)
.moveTo(5).delay(500)
.del('all').delay(300)
.add('Bye bye').delay(2000)
.del(4).delay(1000)
.moveTo().delay(3000)
.loop()
.go();
```
The result is the gif above.
## API
### `TypeCommander(, , )`
| | type | description |
| ------------- |:-------------:| -----|
| selector | `` | Valid DOM selector. |
| initial text | `` | (optional) The initial text of the field. |
| cursor options | `` | (optional) An object that has `width` and `height` properties to be set to the cursor. |
| returns | `` | Type commander instance. |
### `.delay(
| | type | description |
| ------------- |:-------------:| -----|
| time | `` | A time in milliseconds to delay before the next action. |
| initial text | `` | (optional) the initial text of the field |
| returns | `` | Type commander instance |
### `.add(, )`
| | type | description |
| ------------- |:-------------:| -----|
| text | `` | The text to be added at the current position of the cursor. |
| speed | `` | Time in milliseconds. The speed of typing. |
| returns | `` | Type commander instance |
### `.del(, )`
| | type | description |
| ------------- |:-------------:| -----|
| num of chars | `` | The number of characters to be removed. |
| speed | `` | Time in milliseconds. The speed of deleting. |
| returns | `` | Type commander instance |
### `.moveTo()`
| | type | description |
| ------------- |:-------------:| -----|
| position | `` | A position in the text where the cursor will be moved to. |
| returns | `` | Type commander instance |
### `.loop()`
It makes the animation looping.
| | type | description |
| ------------- |:-------------:| -----|
| returns | `` | Type commander instance |
### `.go()`
Runs the animation.
| | type | description |
| ------------- |:-------------:| -----|
| returns | `` | Type commander instance |