A simple demonstration of how you’d mimic an LLM (like ChatGPT) streaming text using TypeIt.
Demonstrates how you can cancel an animation within a form input, in order to allow the user enter their own contents. As an added bonues, it’s shown how you might restart an animation when the user shifts focus away from that input.
An example of how TypeIt’s instance methods can be used to created dynamic, life-like animations to tell a story.
As of v8.7.0, TypeIt’s cursor animation relies on the Web Animation API, and permits you to customize the underlying animation.
Examples of how you might use TypeIt to mimic a person typing a value into an empty input. Two types of “blanks” are illustrated — one with an actual <input>, and the other with a <span>.
The .flush() method can be used in place of .go() to kick off an animation you’ve built. It’s handy if you’d like to type out some one-off content that’s unknown until runtime. For example, you begin with a pre-defined animation (using .go()), and then wait to accept some user input
Shows the capabilities of TypeIt’s ability to move the cursor throughout an animation.
Use TypeIt’s afterStep callback method to change the color of the text after a new character is printed to the screen.
Demonstrates how you can remove the cursor after an animation is complete by using the .destroy() method.
See how you can use TypeIt’s .reset() method to replay an animation based on some user action (in this case, a click).