Animations and Transitions

In the previous chapter, you learned about routes and how to set up an essential routing navigation system using Vue Router. Empowering a smooth transition between different routes or providing your application with the proper animation effects when users interact with it is the next level to achieve.

Throughout this chapter, you will explore the essentials of Vue transitions—how to create your transitions, including single-element animations and animations that use a group of elements, and how to combine them with external libraries for further custom animations. You will also learn how to create full-page animations with transition routes.

By the end of the chapter, you will be ready to implement and handle the fundamental transition and animation effects for any Vue application.

This chapter covers the following topics:

• Understanding Vue transitions
• Exploring JavaScript Hooks for transitions
• Transitioning groups of elements...

Technical requirements

In this chapter, you need to set up a basic Vue project following the instructions in Chapter 1, Starting Your First Vue Project. You also need to add Vue Router, as learned about in Chapter 7, Routing, in some of its examples and exercises. It’s recommended to create a single file Vue component to practice the examples and concepts mentioned easily.

You can find this chapter’s source code here: https://github.com/PacktPublishing/Frontend-Development-Projects-with-Vue.js-3/tree/v2-edition/Chapter08.

Understanding Vue transitions

Unlike other frameworks, Vue.js provides developers with built-in support for animating Vue.js applications, including transitions and animations. Transitioning is implemented in such a simple manner that developers can easily configure and add it to their applications. The Vue.js transition mechanism supports CSS transitions, programmatic manipulation with JavaScript, and even integration with third-party animation libraries such as GreenSock Animation API (GSAP) or Animate.css.

Before diving into this topic, let’s discuss the difference between transitions and animations. A transition happens when a component (or element) moves from one state to another, such as hovering on a button, navigating from one page to another, displaying a pop-up modal, and so on. Meanwhile, animations are like transitions but are not limited to just two states.

Understanding the basics of transitions will allow you to get started with animations.

Using the...

Exploring JavaScript Hooks for transitions

To access the code file for this example, refer to https://github.com/PacktPublishing/Frontend-Development-Projects-with-Vue.js-3/tree/v2-edition/Chapter08/Example8.03

As we learned in the previous section, we can use custom transition classes to integrate external third-party CSS animation libraries for styling effects. However, there are external libraries that are JavaScript-based rather than CSS-based, such as Velocity.js or GSAP, which require Hooks to be set using JavaScript events and external animation handlers.

To use the Velocity.js or GSAP libraries in the Vue app, you need to install them separately by using the npm install or yarn add command, as follows:

• To install Velocity.js, use these commands:

  npm install velocity-animate
  #Or
  yarn add velocity-animate

• To install GSAP, use these commands:

  npm install gsap
  #or
  yarn add gsap

Being a Vue.js component means the transition component supports binding custom...

Transitioning groups of elements

To access the code file for this example, refer to https://github.com/PacktPublishing/Frontend-Development-Projects-with-Vue.js-3/tree/v2-edition/Chapter08/Example8.04

So far, we have gone through the fundamentals of Vue transition elements for simple components and elements, with both custom CSS-only and JavaScript-only support for animations. Next, we will explore how to apply a transition to a group of components – for instance, a list of items that will be rendered simultaneously by using v-for.

Vue.js provides another component for this specific purpose, the transition-group component.

We will now assume that we have a list of messages displayed on a feed, and we would like to add a transition to this list to provide some kind of effect when each item appears on the screen. Take the following component code, for instance (./Example8.04/src/components/Example8-04.vue):

<template>
  <div>
   ...

Examining transition routes

With the combination of the router-element component from Vue Router and the transition component, we can easily set up the transition effects when a user navigates from one URL (route) to another.

To give you a more fundamental understanding, we demonstrate in the following section an underlying case where a user redirects from the home page to the about page on a website.

To enable a transition across routing, with Vue Router 4.x and above, we need to combine the v-slot API with a dynamic component element. We use the v-slot attribute to pass and bind view Component of the current route to the is props of the component element nested under transition, as seen here:

<router-view v-slot="{ Component }">
  <transition :name="zoom">
    <component :is="Component" />
  </transition>
</router-view>

Here, we add a zoom transition effect when navigating...

Using the GSAP library for animation

GSAP is an open source, scripted library that focuses solely on fast animation using JavaScript and provides cross-platform consistency support. It supports animation on a wide range of element types, such as Scalar Vector Graphics (SVG), React components, canvas, and so on.

GSAP is flexible, easy to install, and will adjust to any configuration given, from CSS properties or SVG attributes to a numeric value for rendering an object into a canvas.

The core library is a suite of different tools, divided into core tools and others, such as plugins, easing tools, and utilities.

Installing GSAP

Installing GSAP is straightforward using npm install or yarn add:

yarn add gsap
#or
npm install gsap

After installation, you should see a successful output such as that shown in the following screenshot:

Figure 8.13 – Results after successful installation

Now that we have GSAP installed, we’ll look...

Summary

In this chapter, we explored the built-in support Vue.js has for transitions and animations, both for single and multiple components, and we saw how easy it is to set it up. At this point, you have created transition and animation effects for routes and components and witnessed all the basic features of Vue.js transitions: the custom transition class, group transition, and transition modes. Moreover, you also learned about other leading animation third-party libraries such as GSAP, and saw how to integrate them with your Vue application in order to get better animation effects on the web.

The next chapter focuses on another crucial topic for building a production-ready Vue application – state management and how components within an application communicate with one another using Pinia, a state management library.