svelte-typed-js
A Svelte.js integration for Typed.js.
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.
Checkout the offical project here.
Demo: https://svelte.dev/repl/823ca24caab143a6896f22fb853a83d0?version=3
Table of contents
Installation
npm install --save svelte-typed-js
Usage
Minimal setup:
import SvelteTypedJs from 'svelte-typed-js'
<SvelteTypedJs strings={['First text', 'Second Text']} loop=true>
<h2 class="typing"></h2>
</SvelteTypedJs>
The typing class also allows you to just animate certain parts of a string:
<SvelteTypedJs :strings="['Melih', 'Altintas']">
<h1>Hey <span class="typing"></span></h1>
</SvelteTypedJs>
Properties
You can make use of the following properties in order to customize your typing expirience:
| Property | Type | Description |
|---|---|---|
| strings | Array | strings to be typed |
| stringsElement | String | ID of element containing string children |
| typeSpeed | Number | type speed in milliseconds |
| startDelay | Number | time before typing starts in milliseconds |
| backSpeed | Number | backspacing speed in milliseconds |
| smartBackspace | Boolean | only backspace what doesn't match the previous string |
| shuffle | Boolean | shuffle the strings |
| backDelay | Number | time before backspacing in milliseconds |
| fadeOut | Boolean | Fade out instead of backspace |
| fadeOutClass | String | css class for fade animation |
| fadeOutDelay | Number | fade out delay in milliseconds |
| loop | Boolean | loop strings |
| loopCount | Number | amount of loops |
| showCursor | Boolean | show cursor |
| cursorChar | String | character for cursor |
| autoInsertCss | Boolean | insert CSS for cursor and fadeOut into HTML |
| attr | String | attribute for typing Ex: input placeholder, value, or just HTML text |
| bindInputFocusEvents | Boolean | bind to focus and blur if el is text input |
| contentType | String | 'html' or 'null' for plaintext |
License
