Easy Typewriter effect/animation with Javascript

I’ve recently “ascended” into more than just a Web developer, so I felt like I needed to add a bit of sparkle to my home page with a nice typewriter animation showing all the things I can do. Now you can too.

Add a cool typewriter effect/animation to your design with this one simple snippet I’ve written for you:

typewriter.js

function Typewriter(el) {
const instance = {
el,
eventLoop: [],

wait: (time) => {
instance.eventLoop.push(
() => new Promise((resolve) => setTimeout(resolve, time))
);

return instance;
},

type: (text) => {
instance.eventLoop.push(
() =>
new Promise((resolve) => {
let idx = 0;

const typeOut = (text) => {
window.requestAnimationFrame(() => {
if (idx < text.length) {
el.innerHTML += text.charAt(idx);
idx++;

setTimeout(() => typeOut(text), 125);
} else {
resolve();
}
});
};

typeOut(text);
})
);

return instance;
},

clear: () => {
instance.eventLoop.push(
() =>
new Promise((resolve) => {
const clearText = () => {
window.requestAnimationFrame(() => {
if (el.innerHTML !== "") {
el.innerHTML = el.innerHTML.substr(
0,
el.innerHTML.length - 1
);

setTimeout(clearText, 125);
} else {
resolve();
}
});
};

clearText();
})
);

return instance;
},

run: (loop) => {
let i = 0;

const _run = () =>
new Promise((resolve) => {
if (i < instance.eventLoop.length) {
return instance.eventLoop[i]().then(() => {
i++;
return _run();
});
}

if (loop) {
instance.run(loop);
}

resolve();
});

_run();
}
};

return instance;
}

Demo and usage #

Published in Code, Javascript


You might enjoy these as well

  1. React/Preact hook: usePersistedStore
  2. React/Preact hook: useEventListener
  3. Using Styled components with Preact
  4. Load a specific image depending on light/dark mode
  5. Using Angular CLI with Laravel
  6. Deploy to Netlify via GitHub actions and "$ave Dat Money"
  7. Easily preserve any aspect ratio with pure CSS
  8. Easy Light and Dark mode switching with CSS