camwiegert / typical Goto Github PK

View Code? Open in Web Editor NEW

1.5K 9.0 62.0 22 KB

Animated typing in ~400 bytes 🐡 of JavaScript

License: MIT License

JavaScript 100.00%

javascript module typing animation

typical's Introduction

typical

Animated typing in ~400 bytes 🐡 of JavaScript.

Zero dependencies
MIT licensed →
Emoji support
Smart delete: only delete what needs deleting
Pausing: pause between steps
Looping: easily loop from any point
Waiting: wait on arbitrary Promises
Humanity: slightly varied typing speed

Demo →

Install

npm install @camwiegert/typical

More install options

Instead of using a package manager, you can download typical.js from GitHub and import it locally or import it directly from a CDN like unpkg.

API

type(target: HTMLElement, ...steps: any[]) => Promise<void>;

The module exports a single function, type, which takes a target element as its first argument, and any number of additional arguments as the steps to perform. Additional arguments perform actions based on their type:

Type	Action
`string`	Type text
`number`	Pause (milliseconds)
`function`	Call with target element
`Promise`	Wait for resolution

Usage

The most basic usage of type is providing a target element and a string to type.

import { type } from '@camwiegert/typical';

type(element, 'text');

Pausing

In order to pause typing at any point, pass a number of milliseconds to pause.

type(element, 'Hello', 1000, 'Hello world!');

Looping

In order to loop, pass type as a parameter to itself at the point at which you'd like to start looping. It can be helpful to alias type as loop to be explicit.

import {
    type,
    type as loop
};

const steps = [1000, 'Ready', 1000, 'Set', 1000, 'Go'];

type(element, ...steps, loop);

To loop a finite amount, pass your steps multiple times.

type(element, ...steps, ...steps, ...steps);

Waiting

When passed a Promise, type will wait for it to resolve before continuing. Because type itself returns a Promise, that means you can wait on a set of steps to complete before starting another.

const init = type(target, 'In a moment...', 500);

type(target, init, 'start', 500, 'looping', loop);

Functions

Function arguments are passed the target element, and can be useful for operating on the target element between steps. If you return a Promise, type will wait for it to resolve.

const toggle = (element) =>
    element.classList.toggle('is-typing');

type(target, toggle, 'Type me', toggle);

Support

react-typical - React component
vue-typical - Vue component

typical's People

Contributors

Stargazers

Watchers

Forkers

watheqalshowaiter melvincarvalho mistatwista git2358 turkyden blesstosam daiduong47 zhangpanweb z88xiaodong cbbfcd umaar kosowwwa incrediblejustin ws1993 wang0618 sanyuesiyuewuyue melodyjerry eric5013 yagamihikari watson1101 zfbetty xinglongjizi dxerxes qhx0807 crossstone vi-jay akalsy eleazarsauz alamiss yaob1990 xx-fe huangw1 lxngoddess5321 arilla erqiu-sj juneman 521hellogithub somewaha lantmao dandycheung ajunlonglive janithahn kunieone khalidadan whoinlee tomskopek stvhanna keyzf flixlix muhm21cn ericismyeldestson yomaser wxsc2500 mkygogo wilsondrew cryptoxunm ghostcode wynode wuhuajin vaaagle hqdmyjsw marciopocebon

typical's Issues

type speed

Hi ^^

Would be great to customize the typing speed, what do you think ? Did you plan to let this be customizable ?

Thanks for your lib, love the minimalist ones like this ❤️

react component

Hey @camwiegert,

Thanks for creating this great library, I've just published the React component that consumes your package. https://github.com/catalinmiron/react-typical (demo: https://catalinmiron.github.io/react-typical/) Thanks!

Some Unicode characters aren't iterated correctly

thx! i like this repo, but unicode is a trouble, such as:

type(target, 'café', 1000, 'cafe', 1000, loop);

type(target, '👨‍👩‍👦', 1000, '👨‍👩‍👧‍👦', 1000, loop);

Question: How can we break/destroy an infinite loop of typical

Hello,

I tried to break a loop but I found no solution.
Do you have a solution for this?

Thank you

Add TypeScript types

Is there a typescript version?

On page performance highly impacted by Typical?

Hi there,
I have 3 Typical texts running on my page. But I noticed some major performance usage – like even Fans start spinning when my page is open, plus Activity Monitor shows the website's progress taking like 30%-60% of all CPU, WHILE Typical is "typing" the texts. Very uncommon for a quite simple page…

Has anyone observed something similiar?

I have two example cases that lead to my finding. When disabling any of them, the page performance & CPU usage drops to an expected (non relevant) level.

Example 1

"Simple" use as according to the docu / examples (unless I missed something)

(async() => {
	let Typical = await import('https://unpkg.com/@camwiegert/typical');

	const step1 = Typical.type(myTextDiv1, hideMyTextDiv3, showMyTextDiv1, 'This is step 1', 1000);
	const step2 = Typical.type(myTextDiv2, step1, hideMyTextDiv1, showMyTextDiv2, 'This is step 2', 1000);
	const step3 = Typical.type(myTextDiv3, step2, hideMyTextDiv2, showMyTextDiv3, 'This is step 3', 3000);
})();

While running, page performance is decreased / CPU spikes to 60%+.

Example 2

Instead of just looping 1 and the same text, I am looping a group of 3 different typing texts - one after each other, after the last one, the 1st starts again.

For this I use a while() { }-loop:

(async() => {
	let Typical = await import('https://unpkg.com/@camwiegert/typical');

	var loop = true;
	while(loop) {
		const step1 = await Typical.type(myTextDiv1, hideMyTextDiv3, showMyTextDiv1, 'This is step 1', 1000);
		const step2 = await Typical.type(myTextDiv2, step1, hideMyTextDiv1, showMyTextDiv2, 'This is step 2', 1000);
		const step3 = await Typical.type(myTextDiv3, step2, hideMyTextDiv2, showMyTextDiv3, 'This is step 3', 3000);
	}
})();

Page performance here is constantly 30%+ and spikes to 60%+ while Typical is "typing".