Vue Animation: Customizing and Animating Your Vue App with GSAP

GSAP is one animation library Vue developers might want to know for adding a bit of movement to their apps.

Animation benefits a website by making interaction more engaging, intuitive and visually appealing. It improves the user experience, makes an excellent first impression, and makes visitors more satisfied with your website.

While animation can greatly benefit your website, it can also have a negative impact on your website if not implemented thoughtfully—it can hinder responsiveness, accessibility and performance. The best method to maintain a balance with your animations is to keep them appealing and straightforward. Which is what this post will teach us.

We can use a variety of well-known animation libraries with Vue for our project. Today we will learn about an advanced animation library that we can use to develop smooth animations and transitions called Green Sock Animation Platform (GSAP). After this article, we will know how to leverage GSAP’s animation features to make engaging animations for our application. You don’t need a prior understanding of utilizing GSAP because we will review its fundamentals and focal areas.

What is GSAP?

The Green Sock Animation Platform is a professional-grade JavaScript animation for the web. It helps us create animations that look great on all major browsers. GSAP is modular, adaptable and highly efficient. Its plugin design strikes a balance by keeping the core engine lean and efficient while allowing any functionality to be added via optional plugins. It is compatible with DOM, Canvas, SVG and Animate CC. It contains professional features that are user-friendly for beginners.

We can animate any numeric property of an object using GSAP, as it doesn’t have a predefined list to select from. It handles complex string values with nested colors in any format. The distinctive feature of GSAP is that it has no dependencies, which means it isn’t built on top of any third-party technologies, such as jQuery, though we can integrate GSAP with jQuery. This decreases the load time and improves website performance.

Fundamentals of GSAP

GSAP includes a comprehensive range of tools and capabilities that make building smooth, compelling animations easier. Here are some fundamental GSAP ideas.

Note: GSAP’s animation features are updated. Instead of constructing or referring to the various aspects of GSAP basics like TweenMax, TweenLite, TimelineMax or TimelineLite, we can simplify them into a GSAP object. Check the docs to get the latest updates on the syntax and other updates.

Tween

A tween is a single instance of what applies predetermined property values to an object while moving an object from one point on a webpage to another. It can alter numerous characteristics of multiple objects over time.

TweenMax.method(element, duration, vars)

The Tween function has three methods: elements, duration and object properties. The target property, also known as an element, represents the HTML element we want to animate. The duration property is the amount of animation time in seconds. And the var represents the properties of the targeted component we want to animate.

The common methods we can use in creating a tween are gsap.to(), gsap.from() and gsap.fromto().

Timeline

A timeline holds several tweens, manages the sequencing and timing of different applications, and manages and choreographs complicated animation sequences.

const timeline = gsap.timeline();

Easing

Easing is the most crucial aspect of motion design because it affects how an object goes from one point to another and the desired look and feel. In GSAP, ease controls the pace of change in animation and is used to define the animation style of an object. GSAP provides several relaxing choices and a graph example to help us understand their different functions.

Staggering

Staggers are used to animate a set of elements. A swagger allows us to set the start time for animating each group component. Using its built-in tools, GSAP makes it simple to stagger animations.

gsap.method(element, { 
stagger: .1
})

Draggable

The Draggable plugin allows us to control HTML components by dragging, spinning and even flick-scrolling them using mouse and touch events. Using GSAP’s draggable plugin, we can create dynamic elements that easily transition between multiple positions, creating animated movement from one spot to another.

Creating a Basic Animation with the GSAP Method

Before we begin creating simple GSAP animations, we should first grasp the various methods that GSAP provides for creating animations. These methods accept three values:

• The element to be animated
• The object containing the properties to be animated
• The element’s duration

Methods aid in the generation of final and beginning values for animations. In the following part, we will see various GSAP methods, from simple to complex, and how we may use them to animate objects in our application. GSAP uses short code for 2D and 3D transform-related properties.

The to() method helps define ending values in our animation, where we want to animate, and how it should happen.

gsap.to("element", {rotation: 360, x: 100, duration: 1});

The from() method helps define the starting values in our animation. In other words, a backward animation.

gsap.from("element", {rotation: 360, x: 100, duration: 1});

The fromto() method allows us to define both the start and end values.

gsap.fromTo("element", {rotation: 360, x: 100, duration: 1});

Below is an example of using the three GSAP methods to animate an image.

Check out the full code example on Codepen.

Finally, we learned how to make a simple animation with GSAP and its methods. The next stage is for us to use GSAP to generate customized animation. That is what the following part will introduce to us. However, before proceeding to the subsequent stage, we must set up our development environment and integrate GSAP.

Setting Up the Development Environment

The first step in this post is to create a new Vue project. To create a new Vue project, open a terminal, navigate to the folder where we want the new project created, and run the command below:

npm init vue@latest

Then we will get a prompt message asking us to confirm certain extra dependencies we want in our project. The command above will construct a folder structure for our new project.

Integrating GSAP in Vue Project

The next step is to integrate and configure GSAP in our Vue project so we can get started. Navigate to the new project we created and use the following command to set GSAP in our new project:

npm install gsap –-save
or
Yarn add gsap

After installing GSAP in our Vue project, we will copy and paste the following code into our main.js file to enable GSAP to work globally in our application.

import gsap from 'gsap'

Customizing Animations in Vue with GSAP

In this step, we will create a simple design using TailwindCSS for styling, Vue as a framework, and GSAP for animations. This section will teach us how to combine the GSAP features and methods mentioned in earlier sections to create visually stunning animations for our design. To start the setup, follow this article to set up TailwindCSS in our Vue app.

  mounted: function () {
    gsap.from('.hero-image', { duration: 3, scale: 2, ease: "bounce.out" });
    gsap.fromTo(
      ".hero-text",
      {
        opacity: 0,
        x: "-100%",
      },
      {
        duration: 1.8,
        opacity: 1,
        x: 0,
        ease: "power4.inOut",
        delay: 0.3,
      }
    );
    gsap.fromTo(
      ".enrol-btn",
      {
        y: "100%",
      },
      {
        duration: 1.5,
        opacity: 1,
        y: 0,
        delay: 1.5,
      }
    );
  }

The initial animation in the code snippets above targets an element with the class hero-image; after that, we added a method from() to scale up the picture over a 3-second duration. When we set the scale attribute to 2, the image will double in size. We added the easy method with the property bounce.out to give the animation a bouncing effect.

We used the fromto function to generate a sliding effect with the easy power4.inout easing curve and a 0.3 second delay to ensure that the text animation begins after the image motion.

Here is the final output of the code example above:

While GSAP may be a bit difficult to implement for simple designs, there are various built-in animation plugins that we may utilize to build a basic animation. Progress Kendo UI for Vue Animation is one of them. Kendo UI Animation helps to create or animate HTML elements with seamless transitions in the viewport. One unique thing about this library is that we can use it internally or separately to animate our UI elements.

Kendo UI for Vue Animation includes a variety of built-in animation types to assist us in creating beautiful designs that improve user experience. You can try it out to see if the library is right for you.

Conclusion

Animation is a great way to bring your app to life.

In this tutorial, we learned what GSAP is, how it works, how to make a basic animation with GSAP, and how to customize our animation using the Vue framework. This guide should help you get started with GSAP.