Tips and tricks to create smooth animation in Vue 3

Animations can give a wow factor to your web application if done right. Smoother the animation, the more likely the user will stay on your site longer. But if the animation is inappropriate or choppy in its motion then users get frustrated and leave very quickly.

When it comes to web application frameworks and animation, One thing that developers like about Vue.js is the fact that Vuejs has support for animations built-in, that’s right no need to fiddle around and research 3rd party libraries. You just need to install Vue.js and you’re off!.

In this article, we will be looking at some tips and tricks you can use in Vue3 to create a smooth animation. There is also a video tutorial that gives a step by step guide in using these tips and tricks to create a friend list UI.

Video tutorial — How to create a smooth animated friend list in Vue 3

How does Vue.js make it easy to add animations?

You dont have to worry about the motion algorithm, that's all taken care off in the browser.

Usually states change when something is added or removed from the dom or when a property of an element is changed like color or position. Vue 3 provides Hooks for components when such changes take place in the DOM. This is achieved by using the built-in <transition> and <transition-group> component wrappers, as shown in the example below:

In the above example, the <p> tag with the message “This will added and removed from the DOM” is wrapped around a <transition> tag. Also note that we have the V-If=”show” as an attribute. This is the mechanism that allows us to decide if this tag is to be rendered or not, changing the value of show to false will remove it from the display.

If you look closer at the wrapper transition tag you will see that we also gave a name attribute which is set to fade, as shown here: <transition name=”fade”>. Under the hood, the transition component provides some hooks that do some magic to make the animation possible. These hooks will add enter-leave css classes, these are prefixed with the name attribute that you specified in the transition tag. In this example these dynamically generated classes are : .fade-enter-active, .fade-leave-active,.fade-enter-from, .fade-leave-to.

.fade-enter-active, .fade-leave-active {   
transition: opacity .5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}

Now let us apply this to lists by using <transition-group>

Here we have some methods associated with the buttons to add and remove items. The key part in the template is the block of code for rendering the list when items are added and deleted :

<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item" class="list-item">
Item: {{ item }}
</li>
</transition-group>

We are using <transition-group>.We are replacing a normal <ul> with <transition-group name=”list” tag=”ul”>. In the transition tag we have a tag attribute which we set to “ul”. This makes sure that we are rendering a ul. And we also specify the name attribute as “list”. Knowing this we can add the animation style properties for the dynamically generated classes as shown below:

/* Vue generated animation state classes for active state*/
.list-enter-active,
.list-leave-active {
transition: all 1s ease;
}

/* Vue generated animation state classes for enter and leave states*/
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}

The property "transition: all 1s ease;" will apply a transition to all properties to the active state classes, but we only animate the opacity and y position. We are also applying the built in ease function to define the type of smooth animation we want. The class ."list-enter-from" is the class for the start position when we add an item, and the class ".list-leave-to" is the end position when we remove an item.

Now for more advanced animation, we use key frames.

So our styling for the Vue generated animation state classes becomes:

To bounce out we use the same animation in reverse. That is why we have the keyword reverse in the .list-leave-active class :

.list-leave-active {
animation: bounce-in 0.5s reverse;
}

Conclusion

UI Designer/Developer