Design Better UX With Vue.js Transitions and Animations

Transitions and animations are an important design pattern whose aim is to improve the user experience (UX) by making the user interface (UI) more natural and intuitive.

Most people think that the purpose of transitions and animations is to engage the user's attention, and this is true to some extent. In certain contexts, such as game websites, where attractiveness and entertainment take precedent, it is justified. However, in most websites, engagement should be the secondary role, while the main role of any transitions or animations should be for communication.

And that will be the subject of this tutorial. We'll explore how transitions and animations can communicate effectively, and we'll see how to use them in the context of Vue.js. Of course, to apply the principles discussed below, you can use any other library or framework (such as React or Angular), or plain CSS transitions and animations.

Note: To follow this tutorial, you should have at least some basic knowledge about Vue.js. If you need to get up to speed, try our beginner's course, Get Started With Vue.

Vue.js

Get Started With Vue

Lawrence Turton

Why Are Transitions and Animations So Important?

In the real world, things don't just appear and disappear suddenly. They move smoothly, they change gradually. In a house, we see people entering or leaving the rooms. On the road, we see cars approaching or moving away. Even at different speeds, their movement is continuous. So to make an interface familiar and easier to understand, we need to mimic some aspects of this real-world behavior in our websites and applications.

This is the role of transitions and animations. They smooth changes between states. They show and explain what happens in a clear and predictable way. In most cases, without transitional effects, the user would be wondering what just occurred.

In modern websites, where interactivity plays a key role, the knowledge of how to use this powerful design pattern properly is crucial. The first thing human eyes perceive is movement. Human brains just love movement. Movement creates interest and catches the attention, but most importantly it delivers a message. The right message will lead to the right action. So proper use of transitions and animations can be the difference between a user making a purchase or leaving your website.

What Are Transitions and Animations?

A transition is simply the change that occurs while a thing moves between two states. The first state is the starting point, and the second state is the ending point. It's like when you open your car's window. The window first is in the closed state, and when you push the button, it gradually transitions to its opened state.

An animation is a series of transitions arranged in a logical order. This means that we have not only starting and ending points, but also several points in between. With transitions, we just go from A to B, or from B to C, and so on. With animations, if we want to go from A to E, for example, we need also to pass through B, C, and D. So the whole animation from A to E is actually made of four transitions, giving an illusion of continuous motion.

How Do Transitions and Animations Improve User Experience?

The first and foremost way in which transitions and animations improve UX is through communication. Just as real-life communication can improve human relationships, similarly in web development, communication can improve the UX of your website or application.

Harry Marks, award-winning broadcast designer, said:

If you don't have a story, no amount of graphic trickery will make it interesting.

So, if content is king and stories are all-important, the key is to present that content to the users in a pleasant and meaningful way. The story communicates a message to the users and must deliver it in a way that users can understand. Let's explore some examples:

If an object fades away, users know it disappeared.
If an object fades into view, users know the object has arrived.
If an image thumbnail zooms in after a mouse click or hover, users know that the zoomed image is the large version of the thumbnail.

All these transitions and animations are like road signs. They give the users clues about what to expect. And this leads to a more pleasant user experience.

There are also some important goals which transitions and animations help us to achieve in our application interfaces. They help us to:

maintain context while changing views
explain what just happened
show relationships between objects
focus user attention
improve perceived performance
create an illusion of virtual space

We'll see how this happens in action in the following examples, but let me first introduce you to Vue.js transitions and animations.

Getting Started With Vue.js Transitions and Animations

Working with Vue.js transitions and animations is easy. Vue.js provides a <transition> component which wraps the element or component you want to animate. It automatically adds three entering and three leaving CSS classes.

v-enter, v-enter-active, and v-enter-to are responsible for the enter transition when the component is enabled or inserted.

v-leave, v-leave-active, and v-leave-to are responsible for the leave transition when the component is disabled or removed.

v-enter/v-leave and v-enter-to/v-leave-to define the starting and ending states of the transition. v-enter-active/v-leave-active define the transition's configuration, such as duration, easing function, etc.

The <transition> component can have a name property. If we define one, it will replace the default v- prefix in all classes. For example, if the name is set to "menu", the v-enter class will become menu-enter, and so on.

Let's now move on to the next section and see how all this is used in practice.

Vue.js Transitions and Animations Use Cases

What follows is a series of use cases which will illustrate the practical application of transitions and animations in Vue.js.

Note: The CSS code unrelated to Vue.js is not shown in the examples for brevity. To see the full code, follow the link to CodePen at the end of each example.

Use Case 1: Dropdown Menu

In this first example, we have a nice dropdown menu which opens at mouse hover. The problem is that this happens too quickly, which is distracting and inconvenient to the users. To make the change between the opening and closing states more smooth and natural, we'll use CSS transitions. This helps users by explaining what just happened, so they can clearly see the connection between the drop-down button and the menu itself.

Let's see this in action. First, we create our HTML template:

<div id="app">
  <ul class="navbar">
    <li><a href="#home">Home</a></li>
    <li><a href="#products">Products</a></li>
    <li class="dropdown">
      <button class="dropbtn" @mouseover="show = true" @mouseout="show = false">Dropdown 
        <i class="down-arrow"></i>
      </button>
      <transition name="dropdown">
        <ul class="dropdown-content" v-if="show" @mouseover="show = true" @mouseout="show = false">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
       </ul>
     </transition>
    </li> 
  </ul> 
</div>

This creates a navbar menu with three buttons. The third button will open a drop-down menu, which is an unordered list wrapped with the <transition> component. We set the name attribute for the transition to dropdown. When the show property is true, the menu will appear, and vice versa.

In the JavaScript part, we create a new Vue instance and set the show property initially to false. So the menu will be hidden until we hover over it.

new Vue({
  el: '#app',
  data: {
    show: false
  }
})

Next, we use the transition classes created by Vue to apply the desired CSS transition:

...

.dropdown-enter,
.dropdown-leave-to {
  transform: scaleY(0.7);
  opacity: 0;
}

.dropdown-enter-to,
.dropdown-leave {
  opacity: 1;
  transform: scaleY(1);
}

.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.3s ease-out;
  transform-origin: top center;
}

In the first CSS declaration, we make the menu transparent and slightly scaled down at the beginning of the enter transition and at the end of the leave transition.

In its visible state, we make it fully opaque and scaled to its normal dimensions. In the last declaration, we set the settings for the transition. It will last 0.3 seconds and will have the ease-out easing function applied. Also, we set the transform-origin to top center so the menu will start to appear right below the drop-down button with a nice scroll-down effect.

Use Case 2: Flipping Form

In the second example, we have two forms. One is used to allow users to log in, while the other allows users to create a new profile. Going from one form to another by loading a new page can interrupt the user flow. So we'll use a flip transition, and thus the switch between the two forms will be sleek and easy. This will help to maintain context while changing views, making the user flow fluent and continuous.

Here is the template code:

<div id="app">
  <transition name="card" mode="out-in">
    <div class="card" v-if="front == true" key="front">
      <h2>Sign In</h2>
      <div class="form">
        <h1>Sign In Form</h1>
      </div>
      <div class="footer">
        <span>Not a member?</span>
        <button @click="front = false">
          Join Us
        </button>
      </div>
    </div>
    <div class="card" v-else key="back">
      <h2>Sign Up</h2>
      <div class="form">
        <h1>Sign Up Form</h1>
      </div>
      <div class="footer">
        <span>Already a member?</span>
        <button @click="front = true">
          Log In
        </button>
      </div>
    </div>
  </transition>
</div>

Here we want to transition between two elements: the sign-in and sign-up forms. Because we are toggling between elements that have the same tag name (we wrap both forms with a <div> tag), they must have unique key attributes. Otherwise, Vue will only replace the content of the element.

Also, because entering and leaving happens simultaneously by default, we need to use the mode attribute. We set it to out-in, so the current element will transition out first, and then, when complete, the other element will transition in.

In the script part, we set the front property to true. So the sign-in form will be displayed first:

new Vue({
  el: '#app',
  data: {
    front: true
  }
})

And now let's move on to the CSS code:

...

.card-enter, .card-leave-to {
  opacity: 0;
  transform: rotateY(90deg);
}

.card-enter-active, .card-leave-active {
  transition: all 0.5s;
}

We make the form transparent and rotated 90 degrees at the start of entering and at the end of leaving the transition. Then we set the transition's duration to 0.5 seconds.

Use Case 3: Modal Window

In the third example, we use a modal window to show users additional information. But the modal appears and disappears abruptly and merges with the background. To solve the problem, we'll use transitions so the modal will be zoomed in and zoomed out smoothly when it is opened or closed. Also, we'll dim the background while keeping the modal bright to create more contrast. This will focus the user's attention in a natural way.

Let's start with the template again:

<div id="app">
  <div v-bind:class="[isShowing ? blurClass : '', clearClass]">
    <p>Lorem ipsum dolor sit amet...</p>
    <button @click="toggleShow">Say Hello</button>
  </div>
  <transition enter-active-class="animated zoomIn"
    leave-active-class="animated zoomOut">
    <modal v-if="isShowing" class="modal">
      <button @click="toggleShow">Close</button>
    </modal>
  </transition>
</div>

In this example, we use custom transition classes. This way, we can use an animation library such as animate.css. We put the custom classes directly in the <transition> component and use the classes from the animate.css library.

In the script part, we first register the modal component used in the template above. Then, in the Vue instance, we set several properties and one method, which will help us to toggle between visible and hidden state, and apply different classes for each one:

Vue.component('modal', {
  template: `<div>
    <h2>Hello Vue!</h2>
      <slot></slot>
   </div>`
})

new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false,
      clearClass: 'clear',
      blurClass: 'blur'
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
})

And here are the CSS classes:

...

.clear {
  transition: opacity 1s;
}

.blur {
  filter: blur(1px);
  opacity: 0.5;
}

The .blur class is applied when the modal is opened, and the .clear class when it is closed.

Use Case 4: To-Do List

In the last example, we have a simple to-do list app. It works fine, but when we add or remove items, they are inserted and removed instantly. Users can be easily confused about what is added and what is removed. To make the user experience more pleasant and predictable, we'll use an animation when the items are inserted or removed. This will show relationships between items and help users to orientate themselves and understand what's going on.

Here is the template:

<div id="app">
  <h4>
    's To Do List
  </h4>
  <div>
    <input v-model="newItemText" />
    <button v-on:click="addNewTodo">Add</button>
    <button v-on:click="removeTodo">Remove</button>
      <transition-group name="list" tag="ul">
        <li v-for="task in tasks" v-bind:key="task" ></li>
      </transition-group>
  </div>
</div>

In this example, we want to animate multiple items, so we need to use the <transition-group> component. Unlike <transition>, it renders an actual element. By default, it is <span>. But we actually need an unordered list, so we need to set the tag attribute to ul.

In the script part, we put some initial data in and create two methods responsible for adding and removing list items:

new Vue({
  el: '#app',
  data: {
    name: "Ivaylo",
    tasks: ['Write my posts', 'Go for a walk', 'Meet my friends', 'Buy fruits'],
    newItemText: ""
  },
  methods: {
    addNewTodo() {
      if (this.newItemText != "") {
        this.tasks.unshift(this.newItemText);
      }
      this.newItemText = "";
    },
    removeTodo() {
      this.tasks.shift();
    },
  },
})

And here are the CSS classes:

...

.list-enter-active {
  animation: add-item 1s;
}

.list-leave-active {
  position: absolute;
  animation: add-item 1s reverse;
}

.list-move {
  transition: transform 1s;
}
@keyframes add-item {
  0% {
    opacity: 0;
    transform: translateX(150px);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-10px) skewX(20deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

In the CSS, we create an add-item animation. We use that animation in the enter transition. In the leave transition, we use the same animation, but reversed. This follows the Symmetry of Interaction principle.

If you try the app at this stage, the items will be animated, but the list itself will just snap to its new place. To make it move smoothly, we need to do two things: first set the position to absolute in the leaving transition, and then add the move class which Vue provides especially for list transitions.

Best Practices for Transitions and Animations

As you can see, transitions and animations are a powerful way to communicate and engage the user. If used correctly, they can greatly improve the UX. To make it easy to remember, I've prepared the following list of best practices for employing transitions and animations in your websites or applications.

The key to making a good transition is the balance of speed. The right duration differs for each individual use case, but as a rule of thumb, a transition should look and feel natural—not too fast, not too slow.
Rapid movement and movement towards the user are considered more important than slow movement and movement away from the user.
Avoid transitional effects which annoy and distract rather than communicate. The user's attention must be gently guided and directed, not forcibly commanded and dominated.
Avoid overuse of transitions by only using them to communicate change in the interface.
Usually, transitions should be reflexive. If users create an object and it slides in, then when it is removed it should slide out with a reverse transition. This illustrates the Symmetry of Interaction principle.
To make the transitions more discoverable, you should keep them near the user's area of focus. This also will help feel them less like advertising.

Conclusion

I hope that after reading this post you now have a much better understanding of what transitions and animations are and how to use them correctly. You've also seen how to apply them, in the context of Vue.js, to your website or application's user interface, making the UX better and users happy.

This post only scratches the surface about Vue.js transitions and animations. So here are some useful links for further explorations:

from Envato Tuts+ Tutorials

Search This Blog

ELearn World - Learn the Tutorials online