cookies

Hi! This website uses cookies. By continuing to browse or by clicking “I agree”, you accept this use. For more information, please see our Privacy Policy

bg

How to start with animations on Vue.js: a small guide for beginners

author

Mykola Zhadko

/

Front End Developer

4 min read

4 min read

Let’s agree that hardly any attractive website can exist without animation, which has already become an integral part of web development. Sometimes, a basic design is not enough to catch a user’s eye. Moreover, it wouldn’t be an exaggeration to say that static information even throws off uncertain businesses prospects who somehow came across your website.

This article will discuss finishing a website with animation on Vue.js, highlighting its essential elements and additional perks.

Disclaimer: to fully grasp the article’s content, you should first be familiar with Vue.js basics.

Article content:

  1. Why apply animations?
  2. Under the hood of Vue.js
  3. Best practices for animation

Why apply animations?

As we’ve already realized, applying animated objects has a beneficial effect on the UX. So what exact functions does it complete? Let’s see.

  • Engages and focuses user’s attention
  • Communicate with users
  • Convey the message of the content

So building interactive web pages went far beyond just decoration and visualization. But which web development framework to choose? What library components to include? I might have found the answer for you.

Under the hood of Vue.js

A few years ago, creating interactive web pages to complete all those goals mentioned above was almost impossible due to low performance and the lack of tools.
Vue.js, with its integrated ability to fast process and render visual objects, significantly simplified this task.

It became even less challenging when the framework released its most significant strengths for building animations, which are <transition> and <transition-group> wrappers. Now, even seemingly heavy elements don’t require additional libraries.

First, let’s learn what serves what and how these work.

  • <transition> applies the transition behavior for one element and doesn’t create an extra DOM element during the rendering.
  • <transition-group> is used for multiple animations of several components wrapped in <span> by default.

Besides that, I should note that the <transition> component can accept the following parameters:

  • name – string, used to auto-generate transition CSS class names based on input data;
  • appear – boolean, indicates whether to apply transition on initial render;
  • mode – string, controls the timing sequence of leaving/entering transitions. (For example, the last element leaves with “out-in” and the new one appears).

We’ll use them later to complete a transition between cards with information in our first building case.

Creating a transition for a card with information

First, let’s create a component of the card we will animate at the entrance.

<!-- InfoCard.vue -->

<div class="flex flex-row justify-between items-start rounded-md bg-white shadow-md max-w-2xl px-6 py-4">
  <div class="w-40 h-40 mr-6">
    <slot></slot>
  </div>
  <div class="">
    <h4 class="text-xl font-semibold text-alternative">Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
    <p class="text-gray-800">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda distinctio, illum? Laborum, non.
    </p>
  </div>
</div>

Now when using this component, we wrap it in the <transition> tag and apply name=”slide-right”:

<transition name="slide-right" appear>
  <InfoCard :key="0">
    <img class="rounded-md w-full h-full object-cover" src="../assets/sea.jpeg" alt="sea" />
  </InfoCard>
</transition>

After this action, we have an access to auto-generated classes .slide-right-enter-active, .slide-right-leave-active where we determine transition (or animation), and .slide-right-enter, .slide-right-leave-to where we describe the animation itself:

.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.8s ease-in;
}
.slide-right-enter,
.slide-right-leave-to {
  transform: translateX(-100px);
}

Now, we have the following result:

NIMATIONS ON VUE.JS

Building slides with a transition group component

To understand <transition-group> usage, let’s take a more realistic situation, such as building a slider.

First, we create a slider component:

<!-- Slider.vue -->

<transition-group class="mt-10" type="transition" name="slide-left" tag="div">
  <img class="absolute left-0" v-if="index === 0" src="../assets/newyork.jpeg" alt="sea" :key="0" />
  <img class="absolute left-0" v-if="index === 1" src="../assets/london.jpeg" alt="sea" :key="1" />
  <img class="absolute left-0" v-if="index === 2" src="../assets/berlin.jpeg" alt="sea" :key="2" />
</transition-group>

As <transition-group> renders a real DOM element, we can use it as a parent in a component. We apply an absolute positioning for enclosed slides to prevent them from shifting down. To set frames to change automatically, we use setInterval():

data() {
  return {
    index: 0
  };
},

mounted() {
  setInterval(() =&amp;amp;gt; {
    this.index === 2 ? (this.index = 0) : this.index++;
  }, 2700);
}

Now, we can determine classes for animations. In our case, it’s sliding left. Here, we shouldn’t forget about separating the animation entrance and its leaving to make a flipping slide disappear outside the screen:

.slide-left-leave-active,
.slide-left-enter-active {
  transition: transform 1s ease-in-out;
}
.slide-left-enter {
  transform: translateX(100%);
}
.slide-left-leave-to {
  transform: translateX(-100%);
}

After this action, we have the following result:

 ANIMATIONS ON VUE.JS

As we can see, such simple components as <transition> and <transition-group> can help us achieve great results in engaging new users, interacting with them properly, and conveying the right idea.

Best practices for animation

Although we have only started discovering animations on Vue.js, it’s never early to learn how to apply them wisely.

So what are the best practices for animations?

  1. Locate animations at certain zones of users’ attention to create proper communication flow. Often, the items found in particular spots work best for users. Heatmap tools usually help discover these.
  2. Don’t overuse the animated objects on the website. Nobody likes overwhelming and heavy interfaces.
    Lead users’ attention gently, simply, and directly rather than forcing them for something. Flashy, annoying, or dominating animations throw off even more users than their total absence.
  3. Keep in mind that users’ attention is fragile enough to play with. Here, the more, the better is not a rule of thumb. The animation itself is a complex tool for UX improvement, so you should use it carefully as the more.

Anyway, I hope the article was helpful for you, and now you understand the fundamentals of this topic.