Input Animation with HTML, CSS, and JavaScript
In this video, we'll create an input animation with HTML, CSS, and JavaScript, to hide and show a password. I even show you how to create the icons we animated within Figma.
00:00 Beginning / Intro
00:37 Project Setup
03:43 Creating the Password Component
04:39 Display the password component within the App
04:59 Creating the Toggle Button
10:11 Styling our Application
10:30 Creating CSS Variables for the color scheme
11:15 Centering the password field
12:14 Adding the Icons
12:22 Designing the Lock Icon inside Figma
15:15 Designing the Eyeball Icon inside Figma
20:09 Adding the icons to our codebase
25:57 Styling the input
32:04 ANIMATION!! Animating the Circle
37:00 Animation Curves with cubic-bezier
39:14 Animating the Eyeball
42:27 Animating the Pupil with clip-path
43:33 Animation Panel within Firefox Developer Edition
🔗 LINKS
VS Code ES7 React / Redux / GraphQL / ReactNative Snippets - https://marketplace.visualstudio.com/...
Figma - http://figma.com/
Hyper - https://hyper.is/
VS Code - https://code.visualstudio.com/
Cobalt 2 Theme - https://marketplace.visualstudio.com/...
Dank Mono Font, used in VS Code - https://gumroad.com/l/dank-mono
Prettier - https://marketplace.visualstudio.com/...
Firefox Developer Edition - https://www.mozilla.org/en-US/firefox...
🤖 CODE
GitHub - https://github.com/selfteachme/0032-A...
👉🏻 Get Updates and Exclusive content at http://selfteach.me
💥 SelfTeach.me is a Zeal show: http://codingzeal.com
