Input Animation with HTML, CSS, and JavaScript

a while back [Music] a while back i saw this code pin [Music] and wanted to see if i could rebuild it if you're new to the self teach me channel my name is amy dutton i'm a web designer and developer if you're just getting into this space sometimes it's hard to know where to start or what resources to trust i want to help you level up and get to where you want to be if this sounds interesting to you hit the subscribe button below let's start by getting our project set up i'm going to use create react app because react makes it easy to manage state and create react app simplifies the process of getting up and running with react if you're not familiar with react don't worry most of the work that we're going to be doing will be within css i'm going to head over to the terminal and navigate to my projects directory then i'm going to use create react app to set things up so i'm going to say mpx create react app animated password and here animated password is the name of my project and the name of the folder that it's going to create it's gonna take a minute [Music] once the application is created your terminal should look like this gives us several commands that we can run cd animated password yarn start so let's navigate to our animated password directory and then i'm going to use yarn start to get our project up and running within the browser okay once it's up your terminal should tell you you're up and running successfully and then it will also launch a browser with your project pulled up or you can go to this address let's open up our projects code within vs code and get going let's look at what the script set up so a quick look at the sidebar reveals all the files that were generated so if we expand the source directory this is where we'll spend most of our time and we can clean a lot of this up starting at the top so app.css contains all the styling for our app.js file let's just delete all the contents here give that a save app.js is our application so here at the top we can delete the react logo we can also delete everything inside our div with a class name of app give that a save okay then our app.test.js file is a starter test file and since we're going to be changing all the contents for our app.js file this dummy test will fail so for right now i'm just going to delete this file altogether [Music] our index.css file contains the global css that's applied to all of our components if you open it up and take a look it's defining some global fonts you could keep it or delete it it really doesn't matter for right now i'm going to keep it just so my base fonts look okay plus i like having a margin of zero on the body close that index.js is what loads everything in i'm not going to touch this logo.svg we can delete and i'm not going to touch the service worker or our setup test.js we don't need these files but they're good just to keep around first things first let's write out the functionality for our component i'm going to create a folder called components inside our source directory and then i'm going to create a file called password.js and within our new file i'm going to type rafce and hit tab i have an extension running inside vs code called es7 react redux graphql react native snippets i'll include a link in the description below but this expands my snippet into a functional react component okay so the first thing i'm going to do is turn this into a named export it's pretty simple i just get rid of the word default and wrap password with curly brackets i always use named exports this makes things so much easier for consistency you never have to worry about whether the export is a named export or a default export when it's always a named export so let's create our field i'm going to say input type password and give this a name of password to get our component to display within our application we need to import it inside app.js at the top i'm going to say import password from components password then within our return statement i'm going to say password to display our component then when a user hits a toggle button it will display the password as text meaning we'll need state to track the view the user sees if state is a new concept for you you can think of it like a variable that tracks the view or the state of the component in our case we're tracking whether the user can see a password or a text field this will be a boolean a boolean is a true or false value that works like a switch so okay is the password showing yes true is the password showing no false so at the top of our file let's import use state from react if you've never used state before hopefully this doesn't get too confusing but bear with me you got this okay first above our return statement we're going to call use state next we can pass you state a default value so we're going to pass it false by default we don't want our password to show use state returns a pair of values the current state and a function to update the state so we want to save these values so we can reference them later so i'm going to say const is password showing and set is password showing is password showing is the current state this is the name of the variable we could say console.log is password showing and it will return true or false depending on the current state set is password showing is the function that updates our state so notice our function name is very similar to our state the only difference is it has the word set in front of it this is on purpose this is a react naming convention if the syntax looks confusing to you with the square brackets it's actually a javascript thing it's called destructuring an array normally when we're referencing values inside of an array we'll use square brackets like zero for the first item and one for the second item and let's be honest nobody wants to deal with that it's cumbersome and hard to read so by do structuring we can assign the first value return to is password showing and the second value to set is password showing we give these values a name and make it much easier to reference now let's use our state let's wrap our password field with a conditional and conditionals are react are a little strange or rather conditionals within jsx are a little strange you can't just inject an if else block you have to do everything in line so let's say is password showing and if it is we want to display a text field the name of password otherwise we want to display our password field just to summarize if is password showing is true then it'll show the text field otherwise we have a colon we are showing the password field so if we look at this within the browser we will see our password field and we will always see our password field so if you type inside you should see the dots instead of actual text in fact we will never see the text field why well because up here within our code we initialize use state to false if we set this to true then if we come back over to the browser we'll see our text field i'm gonna undo that now let's set up our toggle button this sits outside of the conditional because we always want it to be displayed so i'm going to say button toggle so for now we'll make this really simple and we can style it later if you look at this within the browser you will see the toggle button right next to our field and if we click on this button nothing happens let's add some functionality on the button tag let's add an on click event handler then we can specify a javascript function that will run when the button is clicked we'll use curly brackets to say this is javascript and we'll name our function toggle password and this is just a name that i made up it could be anything okay now we actually need to write the function that will run when the button is clicked so above our return statement i'm going to say const toggle password and this is where we can use our is password showing state that we created earlier so just like a switch we want it to flip back and forth between true and false every time the button is clicked we'll say set is password showing to update our state and all we need to do is pass the new value that we want to update it to and we want it to be the opposite so explanation point of the current state is password showing okay let's look at this within our browser type some text here and if we toggle that we see our text and then we see the password perfect perfect surprisingly that's all our functionality our input field needs of course if this was used in a real application you need to write code for handling the form field but for our demo the bulk of the remaining work will be handled within styles open app.css this is where all the fanciness and the magic is going to happen so let's start by creating css variables for all of our colors and this will just make it easier to reference our colors throughout our code the cool part about css variables is that they're scoped so in our case we want these to live on root roots and then to create a variable we use double dashes whatever name you want followed by colon and then the value be sure to include a semicolon at the end of the line okay we're gonna define four different colors a teal called robin egg blue a dark purple called bunting white and a light gray [Music] when it comes to referencing our variables we'll simply use var and pass it the name of the variable we want to use so for example robin egg blue first let's move our password field to the center of the page and if you look at app.js you'll see there's a div with a class of app that wraps everything let's target that so within app.css we'll say app okay let's make it fill the entire screen so width 100 vw heights 100 vh and if you've never seen vw and vh it's short for viewport width and height then the easiest way to center this is to change the display to flex and we can center it vertically with align items center and horizontally with justify content center let's give our app a background color of light gray so this is where we're going to use our variables from above okay let's save that and look at it in the browser perfect so let's add our icons we want a lock icon at the beginning so it looks like a password and an eyeball at the end to toggle visibility let's jump over to figma and design these icons that's right we're gonna do a little bit of design work currently figma is my go-to app for designing websites and web applications the best part is you can start using it for free with their free plan you can have up to three projects and two editors the first thing i'm going to do is create a new file by clicking on the plus icon in the upper right let's make the lock icon first this one is probably the easiest i'm going to hit the r key to draw a rectangle or you could click on the rectangle icon in the menu bar i'm going to click and drag to create a rectangle then i want to change the color to black and i want this to have a rounded corners then i'm going to hit the r key again to draw a second rectangle and this one is going to be the latch and i want it just inside this rounded corner okay and i want the corners on this rectangle to be even more round so same as before except this time i'm going to set the corners to 35. [Music] i can bring this down a little bit okay let's make sure both of these items are perfectly centered so with both of them selected i'm going to click on the align center button so for the latch let's get rid of the fill and give it a stroke going to make sure that the latch rectangle is the only rectangle selected and then i'm going to click on the minus button in the fill section then i'm going to click on the plus button in the stroke section okay i want the stroke to be black which it already is and give this a width of 10 pixels make this a little bit smaller okay great sweet it's coming together there's only one more thing i want to do to our lock i want to make sure that this is all one shape it'll make it a little bit easier to change the color if it's one object and we're only manipulating the fill with the latch selected go to the main menu then go down to object and outline stroke here you can see that it's no longer a stroke but a fill so a quick tip here i'm going to hit undo is a lot of times i have trouble remembering exactly where that item is there's a search box here at the top and so i'll just type outline stroke and it will appear okay now with both of our shapes selected we can merge them together by clicking on union selection okay the nice thing about figma is that even after we've merged our shapes together we can still edit the shapes individually i can command click on an individual shape and you can see within the layers panel that it selected that particular shape and then of course i can also just expand and collapse this union layer here and select an individual shape and then with that selected i can manipulate it okay onto the eyeball i'm going to hit o to draw an oval you can also click on the down arrow here where we have rectangle and select ellipse i'm going to draw an oval roughly the same size as the lock except leaving a little room at the top for eyelashes similar to before i'm going to remove the fill and add a stroke of 10 pixels and i want to change the placement of the stroke right now it's on the inside the blue line is the shape and the stroke is inside that so i can click on this drop down where it says inside and now i'm going to say center i also want to make sure that our edges and corners are rounded so i'm going to click on these three dots and select rounded on the join option and under cap i'm going to select round as well now with the oval still selected i'm going to hit enter and this will allow you to edit each of the points on the circle individually we want the points on the left and the right to be pointy so i'm going to select one of these points it should turn blue once it's selected and then i'm going to select the bend tool in the toolbar and then i can option click on the point and you'll see my cursor changes i'm going to do the same for the point on the left option click and i'm going to hit enter to exit that mode and i can resize it slightly okay to animate this we need to be able to select the top and the bottom lid separately so i'm going to duplicate our eyeball by hitting command d and then i'm going to hide one of these instances within the layers panel the visible ellipse that's selected i'm going to hit command r so over here and rename the layer to top lid okay and with this layer selected i'm going to hit the enter key to edit the points i'm going to select the bottom point and just hit delete now i'm going to turn the visibility off for the top lid and show the other ellipse and we're going to go through similar steps here so i'm going to hit command r to rename our ellipse to bottom lid then i'm gonna hit enter to edit our individual points i'm gonna select the top point here and hit delete and now i'm going to turn on the visibility of both of the layers we need a pupil and our eyelashes and hit the o key again to draw an oval inside our eyelids and i want that to be black okay for our eyelashes i'm going to hit the l key to go to the line tool so you can click on the down arrow up here and select the line tool same same place where we got our rectangle and our ellipse tool i'm gonna draw one line above our eyeball and hold down the shift key to make sure that it's perfectly vertical i'm going to change the stroke to 10 pixels we want to make sure that our caps are rounded and our join is rounded it looks like we can adjust this just a little bit okay done okay i want to make sure that our lashes are all the same length so i'm going to duplicate this two times by hitting command d twice and then i'm gonna click and drag our new eyelashes to the correct spot so if i move my mouse to the end of this line you should see it change to a curved arrow and i'm gonna click and drag to rotate and i recommend holding down the shift key and that way it will snap at specific [Music] increments let's tighten everything up and just make sure that it's pixel perfect i'm going to select all three of our eyelashes and then come up here and select distribute horizontal spacing now i'm going to hit command g to group all the eyelashes together and then with the entire eyeball selected i'm going to say align horizontal centers now i'm going to hit command g to group our entire eyeball together then i can select both of these icons and come over here to the right and click on the plus button in the export section and i want both of these to be an svg say export and we can just save it to our desktop an svg is a vector file so you can think of it like an illustrator file for the web it's all based on numbers and math the cool part is that the exported file is really just text so we can override that and manipulate it within our code i'm going to create a new file within our components directory called lock.js and i'm going to use my rafce react snippet to stub out a functional component and just like before i'm going to turn this into a named export i'm going to open up our lock.svg code i'm going to copy all of my lock svg code and paste it inside our component's return statement if you saw it automatically reformat it's because i'm running an extension called prettier within vs code i'll include a link to that in the description below i'm going to do a few things to tighten up our file and make it more usable on the svg tag i'm gonna add a class name of lock on the path tag i'm gonna change fill dash rule to fill rule and clip rule these need to be camel cased i'm going to remove any instances to fill on both our svg and our path tags this serves as an inline style and we want to be able to control it through our css then with our password.js file let's import our icon here at the top then right before our conditional we want to include it so if you go over to the browser you should see something like this okay great now we want to do something similar for our eyeball let's create a new file within our components directory called eyeball.js and stub out our functional component and convert our component to a named export probably seeing a pattern here then we want to open up our isvg within vs code and i'm going to copy all the contents and paste it inside our eyeball.js okay this file is a little longer since there are more paths but remember that's the trick here each element of the eyeball the upper lid lower lid eyelashes and pupil they all have to be a separate path so we can target and animate them individually ultimately we'll group the upper lid and the eyelashes together and then we can scale them down to make it look like the eyeball is blinking so if we look in figma i can kind of give you a quick visual so if we grab the eyelashes and the upper lid and we group those together when they scale this down this gives the illusion that the eyeball is blinking this will look even more realistic when we speed up the animation and show and hide the pupil we'll process our svg the same way we processed our lock at the top we want to add a class name of eyeball and any attributes with a dash in them need to be converted to camel case attributes find and replace makes this pretty easy so i'm going to say copy find i'm going to replace all those straight stroke line cap place all those stroke line join replace all those okay perfect now comes the tedious part we need to figure out which part each path refers to the easiest way that i found to do this is to give each path a different color and then we can add a class name to each path labeling it this is actually pretty easy when you want to change the color of a path and an svg you'll modify either the fill or the stroke attribute so let's go through the file and we're going to look for every reference to black and replace those values so okay so here we can say red green purple blue orange brown give that a save let's add it to our password component so in password.js i'm going to import this at the top and inside our button tag let's replace the word toggle with our actual eyeball give that a save and let's open this within our browser now it becomes pretty easy to find and label all the pieces so brown is our left lash and go back to our eyeball.js and i'm going to change brown to our teal hex value and add a class name [Music] of lash left since our eyeball will be the same color throughout the animation i'm going to hard code this value in but if we wanted to make our component more reusable you could remove the stroke and fill properties all together and just control those values within our css now it's just a matter of rinse and repeat our middle lash is blue so we'll do the same thing here our right lash is orange [Music] our top lid is red our bottom lid is green and our pupil is purple next we want to group the top lid and all three eyelashes together easy peasy we just need to wrap everything with a g tag so we have our middle lash our right lash and our left lash so i'm going to group these together and we just want to move our top lid into our group i'm also going to put a class name of eyelid on our g tag to make it easier to style and animate later okay we're going to create a faux box for our input we want it to look like our icons are part of the field even though they're really not don't worry this is going to be easier than it sounds so we're going to wrap our password field with a div that has a class name of faux box so within password.js we already have this div so i'm just going to give it a class name of faux box and within our styles we can go ahead and give this a background color of robin egg blue we also want this to have rounded corners border radius 10 pixels we can give it some padding say 20 pixels and we want to align all the items within our faux box vertically and the easiest way to do this is with a flex box so we can say display flex and align items center look at this within our browser this is what we're looking at we need to do a few more things to tighten up the styles and then we can focus on animating it let's limit the size of our lock so within our styles we can say lock height 40 pixels width 30 pixels for the eyeball we want to limit the size of that too but let's have the parent the button determine the size so on our button tag i'm going to give this a class name of toggle and within our styles we can say height is 50 pixels width is 50 pixels and then we can target our eyeball we want it to have a height of 100 and width of 100 so it fills the buttons let's change the color of the lock and remember we can do that with the fill attribute in our css so i'm going to say fill and we'll use that dark purple color and let's also add a margin right of 15 pixels to give it some spacing between the lock and the input field okay so if we give that a save and look at the browser it's starting to come together okay for the input let's add a class name of password and i'm adding this to both the text and the password field so this will make it easier to style okay within our css we can say password let's make the input a little bit bigger with height 50 pixels width 300 pixels and give it some padding on the left and the right so we'll say zero for the top and the bottom and then 20 pixels for left and right let's make the text a little bit bigger so say font size 18 pixels and a font family of mono space okay then let's add some margin between our input and the toggle button so i'm going to say margin right 10 pixels come back over since we have our faux box that's supposed to look like the input field let's make the passwords background transparent and remove the default border based on the design that we're going for we do want a vertical line between the lock and the area where you type we've already turned off the default border with this border none but we can override the left border with our border left property as long as it's below border none say one pixel solid bar white okay looking good if you type within the field you'll see the browser's default outline style so let's turn that off now let's fix our button style let's go back to our toggle class and we actually want to get rid of the buttons background and border altogether so say background none border none let's add a cursor pointer style so that when you hover over the button the cursor will change to a finger and then let's also remove the outline since the icon is the same color as the background you can't see it anymore we can create a circle with a different background color for the icon to sit on and we can do this by styling the button itself but we want the circle to animate so when the button is toggled the circle expands to fill the space we don't want a button to fill the whole space because the entire field would be clickable gross and so the easiest way to do this is use a pseudo element after on our faux box and then we can style it like a circle and place it directly under the icon and then when the field is toggled animate it to fill the space okay within our css let's go to our faux box styles and just below it add faux box after and we need to have a content property in order to get our pseudo element to display and i'm just going to set the content to nothing and i want to set the display to block and give it a width of 55 pixels and a height of 55 pixels and set the background color to bunting and then to make it a circle we need to have a border radius of 50 and then i want to very specifically say where it's positioned so i'm going to use a position of absolute and remember positioning is always relative we want to position it based on the parent element our faux box so we'll need to add a position of relative to our faux box okay jumping back down i want it to appear about 18 pixels from the right so let's say right 18 pixels and let's give that a save and just see what we're looking at within our browser so it's coming together but our circle is now appearing on top of our icon and we can control the layering using z index so let's give this a z index of one and then jump down to our toggle style so down here and add a z index of two and give that a save now let's move on to the fun part and probably the part that everyone has been anxious to see the animation since we've been working on the circle let's finish the animation on it essentially we're animating between two different states we have the password revealed and the password hidden the easiest way to style these two states is to have a class on the parent element and then change the class based on the state this isn't too hard actually we are already storing this date within our variable is password showing and we've already done something similar with our input field so we'll use the same conditional statement to display our class names we could write this a couple of different ways so i'll show you both options and you can decide which version you like the best here in password.js on our faux box we want to update our class name so instead of quotes we're going to use curly bracket since this is javascript and similar to our input field we can just say is password showing and if the value is true then we want to display a class of show password otherwise we want to show a class of hide password and then regardless of whether we're showing or hiding our password we want to use the class faux box so i'll add that to both options this works and honestly i think this option is the most readable which is always something you want to consider when you're writing code sometimes you should be willing to sacrifice duplication and more lines of code for readability but here there is a little bit of duplication we added faux box twice so let's refactor this let's remove the double faux box and then we'll keep our curly brackets since again this is javascript and at the beginning we can use backticks to display our string faux box then we have our conditional and since that's javascript and it needs to be processed we can wrap that in a dollar sign curly brackets and then at the end we can close our back ticks and close our curly braces let's take a step back and look at this all together in review we're using javascript so we have our curly brackets then the back tick signify a string we're displaying our faux box and then we want to process javascript within our stream so we have this dollar sign curly brackets and we're saying if the password is showing display show password otherwise display hide password this is a little bit drier so in programming dry stands for don't repeat yourself but there are a few more back ticks and curly brackets which might look confusing especially if you're just starting out okay so let's look at this in the browser real quick and make sure that this is working the way that we want it to open our developer tools so i'm going to hit command alt i that opens up our panel over here and i'm going to click on this arrow icon to highlight our faux box okay so here's our faux box and right now it has a class name of hide password if we click on the eyeball so our toggle button this will change the class name to show password awesome so within our css let's style that show password state just below our after styles okay we're styling our faux boxes after state when our show password class is present and notice there's no spaces between both classes here and that's because they're on the same element they're on the same div okay we want our circle to fill the entire space so i'm going to say heights 100 width 100 and we want it to be flush to the right side and say right zero and we want this to have the same border radius as our faux box which is 10 pixels okay so if we save this and test it within the browser you should see it snap back and forth and we can animate this by adding a transition property to our main default styling so if we added it just to the animated state it would only animate in one direction so here i'm going to say transition all the properties and this will animate our height width right and border radius properties and i usually like to list out each property that we're animating individually since it's more performant when we say all it has to watch everything but for now i'm just going to keep things simple and say all then the animation will last a quarter of a second and the last thing we need to specify is how it will ease and usually i'll say ease in out which means that it will move slower at the beginning as it's building up momentum and then it'll slow down at the end to stop but i want this to be a little bit more bouncy so let's take some cues from material design which uses cubic bezier 0.40 0.2 okay i know that looks crazy but okay check out this website this might make a little bit more sense this weird looking curve is called a bezier curve and these weird numbers that we filled out to find the points along the line okay down here in the library i'm going to click on ease in out then i'm going to click on this go button the pink square at the top is how our cubic bezier eases and the bottom square is the standard ease in out see the difference so if you're interested you can click and drag these handles around to compare different curve options and it gives you these points here at the top okay let's get back to our code i don't have to type in these crazy numbers every single time we want to animate something but i do want them all to ease the same way so it looks consistent so let's move this into a variable i'm gonna copy this and at the top of our file i'm going to say easing and paste in the cubic bezier then i'm going to scroll back down and replace our value with our variable okay let's test this within the browser perfect okay you may have noticed that when it's expanded you can't click on the input to enter the password that's because of layering so this is sitting on top of our input i'm going to go back to our app.css and find our password class and our after pseudo element has a z index of one so it just needs to be any number above one so let's say index of three let's hop back over to the browser and you'll notice that our border on our input reappeared and we can type but the text is black and it's hard to read so let's change the color in our css below our password focus class let's add show password password color bar white okay great now let's change the color of our lock so right after our lock definition let's say show password lock fill we want that robin egg blue and let's give this a z index of four to make sure that it shows up on top okay let's test this within our browser perfect okay the last step we just need to animate our eyeball we did the heavy lifting at the beginning to get everything set up so this should be surprisingly simple let's do this first within the chrome developer tools and then we'll copy our styles over to our css okay i'm going to use the arrow tool to select our eyeball.svg and then let's expand this to find our g tag with our g tag selected we can flip it vertically so over here in our styles i can say transform scale y is negative one okay not exactly what you were expecting and this might make a little bit more sense if i explain this within figma here we have our lashes and our upper lid and they're grouped together just like they are within our code if i try to scale these down on the y-axis you'll see that it flips it doesn't look exactly like it does within our browser but it's close actually it probably looks more like this with the top part getting cut off can kind of imagine the rest of the eyelid is up here okay i want the point that it revolves around to be the center of the eyeball itself we need to move that point with a css property called transform origin we'll need to tweak this in the code but let's get a good starting point within figma i'm going to hit the a key to draw a frame around our eyeball [Music] then i'm going to pull down my rulers so i just hit shift r to show the rulers i want these to be right about here if i hover over one of these rulers it will tell me the values that i want so right now i'm looking at 80 pixels and 65 pixels so within chrome i'm going to say transform origin 65 80. that looks pretty good if we wanted to dial this in or double check it you can move your cursor within the y value and then use the up and down arrows just to make sure that looks pretty good i'm going to go with 78 okay the middle lashes getting cut off slightly but i can go to the svg and this is controlling the size i'm going to add overflow visible okay great now we have our values so let's copy and paste these into vs code i come back here give that a copy and then on our eyeball class we want to say overflow is visible and we want to create a new class called eyelid and paste those values from chrome now we want the eyelid to be closed when we have our show password class so let's add that before eyelid and then to animate it it works just like our box and say transition and we want to animate the transform property at a quarter of a second and use our easing variable then let's actually move our transform origin property up to our main eyelid class because that's not going to change we're not animating that okay so within our browser let's give this a refresh [Music] it is coming along okay now for our pupil we could just animate the opacity and call it a day after all it's a fast animation and no one would be the wiser but i'm a firm believer that it's the tiny things in the attention to detail that make all the difference plus this is a good excuse to learn something new so when you think about this the upper eyelid closes down on the pupil it doesn't just disappear we can achieve a similar effect in css with clip path if you've ever done work in photoshop or figma or sketch or xd you're probably familiar with masks so this is similar i'm actually going to jump over to firefox and i have the firefox developer edition installed on my computer i'll include a link in the description below i do most of my development work within chrome but there are a few areas where firefox wears it better and clip path is one of those so i'm going to zoom in a little bit so i'm going to hit command plus a couple times and then let's open our developer tools i'm going to hit command alt i and let's scroll over and this part works just like chrome i'm going to click on our arrow icon to select our eyelid so let's dig down into that and let's make sure this panel is over now you'll notice here there's an animations tab and right now it says no animations were found but if you'll see we have this selected if i click on our eyelid it will animate and it will show us the animation curve now we can click and drag on the playhead to move it around and look at any part of our animation which is pretty cool and you'll see that at halfway it's basically a flat line at that halfway mark so this should give you a general idea of the shape that we're going to work with this isn't going to be 100 perfect but this will look a lot better than just changing the people's opacity okay now we're going to create a clip path on the pupil and we're going to write the code within the developer tools and then copy and paste it into vs code first let's select our pupil so it's right here we have our class of pupil and then on the element down here in our css i'm going to add a clip path property and this value can be a circle it can be an ellipse it can be a polygon and really i want a flat circle so an ellipse is perfect for this which kind of mimics the shape of the eyelid in general okay so we'll say ellipse and then inside parentheses it takes several values so we want the size of the width and the height of our ellipse so i'm just going to make something up for now and we can dial those numbers in later so i'm going to say 30 pixels and 20 pixels at okay and the next two numbers are similar to our origin point where do we want this to be so for now i'm just going to say zero zero okay now this is the crazy part with firefox developer tools i can click on this shape after clip path and this shows you exactly what the clip path looks like then i can click and drag on these points to adjust them and dial in those numbers and i can move this around and you can kind of see how we want to animate it if you're wondering why this isn't completely centered it's because we resize the icon within our css remember the eyeball was a lot bigger and so if we hadn't changed the size then our clip path would be lined up exactly okay so let's do this let's grab the code when the ellipse is at this top point where our pupil is completely showing and this will be our default state so i'm going to copy this and go back over to vs code and let's create a class called pupil and we'll add our clip path then let's create one for the bottom probably right about here give that a copy this is for the show password state okay now we can use our transition property just like before to animate between the two states let's say clip path quarter of a second [Music] then to take this just one more step i'm going to move the pupil down just a little bit in our show password state so i'm going to say transform translate y we'll move it down 5 pixels and we want to animate this so let's add it to our default state so let's say transform translate y zero and we'll add it to our transition now if we refresh and of course you can always come back in and tweak these as much as you like and slow down the animation and examine it one thing i do want to point out is that if you select the pupil and then you click on this toggle button to load the animation in it will only show the pupil animation same with eyelid if i click on this and then click on the toggle it will only show the eyelid animation and if you drag this around you'll notice that the pupil doesn't animate if you want to see both animations loaded in grab the parent state and now when you click on the toggle button it'll load everything in in the browser and hit command 0 to zoom out to 100 and you can see the entire animation awesome done i know this is a long one but i'm pretty pleased with the end result i've posted all my code on github link in the description below feel free to download it use it modify it whatever it's yours if you like this video and want to see more videos on web design and development be sure to hit the subscribe button below hit the bell icon to receive notifications when new videos are posted until then keep coding okay did it did it did it you

Channel: Self Teach Me

Views: 501

Keywords: input animation, input css, javascript

Id: jJ6RNln3fgo

Length: 48min 36sec (2916 seconds)

Published: Thu Oct 29 2020