Code your own TYPING ANIMATION with React ⌨️
Let's cycle through many superpowers in our Next.js app, by building our own Typing Animation! We're gonna use a bit of Tailwind, a CSS animation and a lot of native React state management 🚀
More in our "An app with Next.js" series: • An App with Next.js
Highlighted software:
React: https://reactjs.org/
Tailwind CSS: https://tailwindcss.com/
🎶 I've remixed Heart and Stone by Particle House and Yhello by Lofive, for the background music 🎶
See the code: https://github.com/jmagrippis/eri
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
My own website: https://magrippis.com/
--
TIMESTAMPS
--
0:00 - A sweet typing animation!
0:17 - Blinking cursor
1:38 - Typing the first superpower
4:25 - Extracting a custom hook
5:57 - Refactor to states
8:19 - Deleting a superpower
9:29 - MVP!
10:41 - Accessibility with an aria-label
11:33 - To blink, or not to blink?
13:14 - Possible improvements
14:18 - Next up…
Watch video Code your own TYPING ANIMATION with React ⌨️ online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 23 July 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 9,440 once and liked it 256 people.