Skip to content

PRO TIP Block youtube.com at the DNS level — Pi-hole, NextDNS or your hosts file — but allow youtube-nocookie.com and i.ytimg.com. These tutorials keep playing; the rabbit hole does not.

Learning without distractions

Can I Create This Typing Animation Using TypeScript?

52.5K views on YouTube

JavaScript Simplified Course: https://javascriptsimplified.com

Typing animations are incredibly popular on many sites (especially marketing/brochure sites). In this video I attempt to replicate the typing animations from my JavaScript Simplified course website in TypeScript without using a library. I think this will be a pretty easy project, but I am not the best with TypeScript so we shall see.

📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/ts-typewriter-effect-library
JavaScript Simplified Course: https://javascriptsimplified.com

🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified

⏱️ Timestamps:

00:00 – Introduction
00:32 – Setup/Demo
01:52 – Typewriter Class Setup
06:46 – Creating A Queue
11:56 – typeString Function
14:50 – deleteChars Function
21:38 – deleteAll Function
22:38 – pauseFor Function
23:21 – Configuring Options

#WebDevelopment #WDS #TypeScript