camwiegert / typical Goto Github PK
View Code? Open in Web Editor NEWAnimated typing in ~400 bytes ๐ก of JavaScript
License: MIT License
Animated typing in ~400 bytes ๐ก of JavaScript
License: MIT License
thx! i like this repo, but unicode is a trouble, such as:
type(target, 'cafeฬ', 1000, 'cafe', 1000, loop);
type(target, '๐จโ๐ฉโ๐ฆ', 1000, '๐จโ๐ฉโ๐งโ๐ฆ', 1000, loop);
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!
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 โค๏ธ
Hello,
I tried to break a loop but I found no solution.
Do you have a solution for this?
Thank you
Is there a typescript version?
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.
"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%+.
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".
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.