#vuejs #vue #vite #tailwindcss
Learn how to animate text as if it was typed on the screen, using the frontend web framework VueJS.
We go over how to animated the blinker infont of the text, and how make it go away once we are done typing. We cover on hover transitions with tailwindcss. We use VueJS emits to signal to parent components with an event. Using those events to communicate that lines should animate in sequence, where each line triggers the start of the next. Finally, we use mouseenter and mouseleave to track our components hover state, and animate in an svg arrow next to our component.
- Time Codes -
0:00 - Create the Blinker
2:13 - Animate sequentially
5:20 - Indicate on-hover
- keywords -
vuejs, tailwind, tailwindcss, vite, webframework, framework, web, development, setup, tutorial, guide, howto, programming, coding, vscode, tips, javascript, html, css, templates, laravel, yii, computed, mounted, data(), vbase, hover animation, typing animation, listeners