In this post, I will show you how we implemented those cool animations in our Login and Signup pages with source code included.

How it works?

We are going to animate SVG using CSS and some JavaScript. You can see it in action here.

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 .showEyes or .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 changeFrameShowand 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 selectionEnd). The <span>’s offset will give you the caret position which you just have to correct by the input’s original offset: