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

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:

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(() => {
    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:

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.