SVG ANIMATIONS IN ANGULAR
Leveling up Your Old Login Page
Using a new design to breathe fresh air into your login page
So it’s time to create a login page. You get a good image, create two input fields (one for an email, one for a password), center everything, and leave it at that. It’s a little uninspiring but let’s face it; this is a common experience. Well, it’s time to buck the trend. Let’s create a fresher looking, more engaging log in page with a little SVG magic.
Getting Started
As usual, we’re going to do this in Angular. Why? Because I love Angular! I don’t need any routing, I’ll choose SCSS, and for the input fields, I’ll go with Angular material.
ng new better-login-page --p=sbz // you can use what prefix you want
cd better-login-page
ng add @angular/material // choose what ever theme you wantAngular material will ask you if you want to set up typography styles and browser animations — click yes.
Now we’ll set up some files before we get to the SVG. Let’s start with the app.module.ts:
For the main styles.scss file we’ll add the following:
* {
transition: all ease 0.5s;
}This is to make sure that all the elements will get a nice easing transition.
Finding an SVG File
Now we’re getting to the SVG part. We need an SVG file (if you have one, feel free to skip this part). I searched the unDraw website for an SVG image with the eye keyword and this is what I got.
Now just click the file you want and download it to your computer. There you have it, a great looking SVG file. But there’s a small problem, right? We need to get rid of everything besides that eye (including the dots and the person). So how do we do that? Luckily this is pretty straightforward: we use Figma, a free and easy to use online tool for editing SVG’s.
The first thing we need to do is add a new draft. For that, we click on the “+” sign. After that we drag the SVG we downloaded to the draft.
Notice that on the left we have all the vectors that make our SVG. You can click what you want and delete it (you can even group — but that’s for a different tutorial). Select and delete everything but the eye.
Now we give names (id’s) to the different vectors inside the SVG — you’ll understand why later — just double click the vector and rename it.
Next, select the entire SVG and click export (located on the bottom right). Change the type to SVG and click export. That’s it, our SVG is done!
Back to the App
Now let’s go back to our app. We’ll start with the app.component.html file:
As you can see, I’ve created a section that is basically a flex container for three things:
- Title
- SVG container
- Form container
Where did I get that SVG? Simply open the SVG file we created with a notepad (I prefer notepad++) and copy everything to the HTML file.
An important thing to note here is that I’ve added an angular ID tag to the SVG element and the path elements so that I can access them with ViewChild. Notice that I’ve changed the width to 200 and removed the height. Remember the names we gave to the SVG vectors earlier? This is why; it gives each SVG path (vector) an id so that you could control it through the CSS file with the # selector. This isn’t quite good enough for me, however, so I’m adding the angular ID tag.
Now let’s explain what I did in the form. As you can see, this form is from Angular Material and it contains two input fields. It has ngModel for binding the data, focus, and blur events to know when the user enters or leaves the input, and it has ngModelChange to detect when the user types every letter.
Let’s go to the app.component.scss file:
As you can see it’s pretty simple; making a flex container with everything centered (WOW that used to be so hard — thank you Flex) and setting the width of the input.
Now, this is where things get interesting, this is where the magic happens. The notorious app.component.ts file:
What we did here
Let’s run through everything (please be patient with me!).
The first part is easy; initializing ViewChild for the SVG elements.
This next part was a little bit tricky — trying to understand the positions I want the eye to go to. Ultimately, this was just a matter of testing and going through them all (when you play with the position of the pupil). This is what I wanted to achieve:
The furthest the pupil will go on the X-axis is between -45px (the left side) and 45px (the right side). The furthest the pupil will go on the Y-axis is between 60px (when it gets to the left or the right — it’s the highest point) and 80px (when it’s at the center and it’s the lowest point).
Now, let’s go to the end of the file. Calculating the pupil X and Y positions:
As you can see, I have a lot of magic numbers in there. Why? This is because I couldn’t think of a better way to do it. If you’re a math wizard — or just simply smarter than me — then please feel free to suggest a better method in the comments and I’ll update it!
So I’m passing the length to the functions. What is this length? That is the total characters that have been typed in the input field. Based on that length, I’m changing the current X or Y position. In the calculatePupilXPos() function, I check if the position is bigger than the max position we defined. If it is then the position will be the max position, meaning that the pupil won’t move past our endpoint. The same applies to the pupil Y position; if the position is smaller than the minimum position that we defined then the position will be the minimum (meaning that the pupil won’t be lower than our lowest point). These checks are to make sure that the pupil will remain inside the sclera.
Let’s continue with the rest of the functions:
When the user clicks inside the email input (this is the focus event), the renderer sets a new width for the SVG, making it bigger. Next, calculate the X and Y positions with the current length of the input (currently 0). This makes the eye bigger and brings the pupil to the left corner.
When the user clicks inside the password input, the renderer sets a new width for the SVG, making it bigger. It also colors the entire sclera. This next code block lays out how to make the eye appear closed (as if we’re not looking). When the user leaves the input fields, the renderer returns the SVG to its original state using the transform3d() CSS method.
When the user type’s inside the email input field, this function actually moves the pupil around the sclera — again, using the transform3d() CSS method.
This is our final result!
