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/items?itemName=dsznajder.es7-react-js-snippets Figma - http://figma.com/ Hyper - https://hyper.is/ VS Code - https://code.visualstudio.com/ Cobalt 2 Theme - https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2 Dank Mono Font, used in VS Code - https://gumroad.com/l/dank-mono Prettier - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode Firefox Developer Edition - https://www.mozilla.org/en-US/firefox/developer/ 🤖 CODE + GitHub - https://github.com/selfteachme/0032-Animating-Password-Input 👉🏻 Get Updates and Exclusive content at http://selfteach.me 💥 SelfTeach.me is a Zeal show: http://codingzeal.com