Vue Login Animation

Implementing super smooth animations in your Vue App

In this post, I will be taking you through the steps to implement smooth animations in your Vue app.

Pre-coding thoughts

To accomplish smooth transition between screens, the last animation object of the current screen needs to be perfectly matched with the first animation object of the next screen. This provides the user with the feeling that everything in the app is happening on the same page.

I have created three screens in my app:

  • Splash Screen
  • Login Screen
  • Dashboard Screen

These three screens are bound together with the following animations:

Animation 1

This animation starts in the Splash animation and ends after the app is taken to the Login Screen. Here’s the timeline of the animation:

In the Splash screen, I initially have a Vue logo and the text, “Built with ❤ at GeekyAnts”.

After a specified interval, the text changes its color to green in the direction of right to left.

Once the entire text is turned to green, the text disappears in the direction of left to right. Then, the Vue logo scales up and moves to the left.

The app then takes you to the Login Screen, which looks exactly like the last frame of the Splash Screen, but with a login form on the right.

Animation 2

The Login Screen has two animations. When the user types in their username, the user image changes to that of the user.

Then, when the user successfully logs in, the page starts to move to the left untill the login form is at the center of the screen. The form disappears only leaving behind only the user image, which moves to the top of the screen.

Animation 3

Now the app navigates to the Dashboard screen. This screen only has a small animation where the dashboard screen is made to fade in on the screen. Here’s the timeline of this animation:

Splash Screen Animation

As you can see in the GIF, we are changing the color of the text from black to green. This is done from right to left. Once the entire’s text’s color is changed, we then make this text disappear from left to right. The Vue Logo then scales up and moves to the left.

First let’s initialise a few things such as the name of the animations, duration and the direction of the animation.

Now, let’s take a look at the code for changing the color of the text from black to green.

Once the text is turned to green, it needs to disappear, starting from left to right.

The tricky part here is calculating the animation delay and telling the app to change the colour from right to left but disappear the text from left to right.

The animation delay Pattern is given by:

{ animation-delay: $n * 0.1s + 3s, abs($n) * 0.1s + 3s }

Here $n refers to the nth child element, 0.1s refers to the iteration step, and we are adding another 3 seconds.

Once the text has changed, The Vue logo scales up and moves to the left side of the screen.

To scale, I have simply changed the height and width in each stage of animation, then change the left position to move the logo to the left side of the screen.

If you are wondering why I did not simply use align-items and justify-contents, its because these properties cannot be animated.

The <transition> wrapper

Vue provides us with a transition wrapper component that allows us to add an entering/leaving transitions for any element or component in the following contexts:

  • Conditional statements (v-if)
  • Conditional-display (v-show)
  • Dynamic Components
  • Component Root Nodes

The transition wrapper monitors the animation and provides JavaScript hooks. By applying appear to the transition wrapper, we tell the app to apply transition on the initial render of a node.

Once this animation completes, it calls the leaveEl method which takes the app to the login page.

Login Screen Animation

In the Login screen, when the user successfully logs in, the entire page moves to the left till the midscreen and then the user image moves to the top along while the form disappears simultaneously.

When a user types in the UserName input text box, the user image changes with a fade in and fade out effect.

To achieve this animation, I have user the transition wrapper and an animation class that is provided by Vue itself.

To make the user image to transition in and out, we need to write some CSS code:

To move the page to the left and then to the top, I have again used the left and top property, respectively.

Hiding the form is super easy! Just change the opacity to 0. I am also using the transform property to ensure that the change in opacity occurs over a period of 3 seconds.

Dashboard Screen Animation

On this screen, the Dashboard table appears on the screen with fade-in effect.

To do this, I have used the transition appear wrapper of Vue to apply a transition on the initial render of a node.

It’s a Wrap!

You can check out the entire code of this App here:

Vue is a progressive framework which is proving to be very useful for building user interfaces. You can check out its official docs learn more about Vue, or see this awesome video that will take you through the core principles of Vue.

Also check out StartVueJS, which is a library of open sourced VueJS themes and templates.

This app was developed by Vanishree Yaji and the article was written with the help from Rajat S. Vanishree is a Software Developer at GeekyAnts and Rajat is a Technical Content Writer at GeekyAnts.

Thanks to Sanket Sahu for all the help and support that he gave us while writing this post.

And thanks to you for reading! I hope you found this post to be helpful. Please 👏 if you liked this article.

Follow me on Twitter to know more about what GeekyAnts is doing with Vue and other technologies.