TypeIt
This package allows you to easily integrate TypeIt into your Toddle project. What is TypeIt: TypeIt is a JavaScript library that makes it easy to create flexible, dynamic typewriter effects for the web. Using TypeIt for an open source or personal project is completely free is licensed under GPLv3. To use it in a commercial project, however, a paid license is required. Learn more about them here:
Simple String
Multiple String
Type Into Form Elements
Listen to events and execute different actions.
Build Your Own Animation
Pause and Resume
Action
-
TypeIt
Initiate Typit anywhere in the Toddle app.
Arguments
selector The element where text will be typed. (class, ID,..) string String(s) of text to be typed. To type multiple strings that stack on top of each other, pass an array of them. removeInstance [boolean] Remove the cursor after an animation is complete. Default to false speed [number] Typing speed, measured in milliseconds between each step. Default: 100 lifeLike [boolean] Makes the typing pace irregular, as if a real person is doing it. Defualt: true cursor [boolean] Show a blinking cursor at the end of the string(s). Default: true cursorSpeed [number] The blinking speed of the cursor, measured in milliseconds. Default: 1000 breakLines [boolean] Controls whether multiple strings are printed on top of each other (breakLines: true), or if they’re deleted and replaced by each other (breakLines: false). Default: true
startDelay [number] The amount of time before the plugin begins typing after being initialized. Default: 250
nextStringDelay [number | array]The amount of time (in milliseconds) between typing two strings. If an array is passed, the first value will be used as the delay after the first string has finished typing, and the second value will be used as the delay before the next string begins typing. For example, passing[1000, 2000]will tell TypeIt to pause for 1000ms after typing the first string in a pair, and wait for 2000ms before the next string is typed. If a number is passed, that value will be halved. Default: 750
loop [boolean] Whether your strings will continuously loop after completing. Default: false deleteSpeed [number | null] Deletion speed. If left null, will be 1/3 of the type speed. Default null waitUntilVisible [boolean] Determines if the instance will begin typing automatically on .go(), or only when the target element becomes visible in the viewport. If you don’t want instances far down on the page to begin until they’re visible, set this option to true. Default: false. cursorChar [string] The character used for the cursor. HTML works too!. Default: "|"
buildYourAnimation Please visit www.typeitjs.com/build-your-own/ And record your animation. Copy everything from .type and don't include .go();. Events
afterStep Will fire after each step in the queue. beforeStep Will fire before each step in the queue. afterComplete Will fire after the entire instance has completed typing. NOTE: If "loop" is enabled, this will never fire. typeItInstance The event will return the typeIt instance, which you can use to reset typeIt. For example, reset typing on button click.