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
Figma
Hyper
VS Code
Cobalt 2 Theme
Dank Mono Font, used in VS Code
Prettier
Firefox Developer Edition
🤖 CODE
+ GitHub
👉🏻 Get Updates and Exclusive content at Selfteach.me
💥 SelfTeach.me is a Zeal show