In this post, I will show you how we implemented the animations where the cat follows the cursor with his eyes when entering username and hides them when entering password.
How it works?
Show and hide eyes
The paws movement animation is some kind of a stop motion animation with opacity changes to make the movements smoother. There are separate groups in the SVG for 5 different frames like so:
I have added the
.pawsCSS class to all groups and each group/frame has an indexed
.pawsN class too.
The animation starts by putting
.hideEyes CSS classes on our paws group in the SVG. These classes will start the animation by showing/hiding the frames with different paw states with delay:
Our CSS looks something like this:
We also have the
lastFrameShow keyframes with some opacity changes for smoother animation:
Following the caret position in the text input with the animation of the eyes.
How to move the eyes?
On every input value change, we should position the eyes to look at the caret position of the input.
Let’s create a function called
moveEyes. Attaching it to the input’s change listeners will set a transform on the
.eyes group in the SVG.
How to determine the caret position of an input?
This was the hard part of the animation because you can’t directly access the caret position.
So I added some dummy elements to the DOM by creating a
<div> with the input’s value’s first part (to the
selectionEnd) and a
<span> with the remaining value from the input (after
<span>’s offset will give you the caret position which you just have to correct by the input’s original offset: