Animating Vue with GreenSock
Tags: vue, greensock, javascript, ui
Published: 2019-12-02 14:37:27

---
title: Animating Vue with GreenSock
published: true
date: 2019-11-27 20:00:44 UTC
tags: vue,greensock,javascript,ui
canonical_url: https://blog.logrocket.com/animating-vue-with-greensock/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/z7ly7x5qpk8ang0mrki3.png
---
**Written by [Anjolaoluwa Adebayo-Oyetoro](https://blog.logrocket.com/author/anjolaoluwaadebayooyetoro/)**✏️

The [average cognitive load capacity](https://en.wikipedia.org/wiki/Cognitive_load#History) of humans (the amount of information a person can process in an instant) is seven plus or minus two units of information, and the amount of information in the working memory lasts [around 10 seconds](http://theelearningcoach.com/learning/what-is-cognitive-load/).

According to [Time](https://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/), website visitors decide whether to engage with a site or bounce off the page in just 15 seconds. That means you have only a quarter of a minute to capture your visitors’ attention.

What does this have to do with animations?

Long blocks of text and boring interfaces can increase a user’s cognitive load. [Animations](https://dev.to/bnevilleoneill/animations-using-react-hooks-and-greensock-2o80) and microinteractions can help keep users engaged and reduce the cognitive load while using your website.

However, when not done right, animations can hamper user interactions with your product and negatively impact sales. Performant and easy-to-use tools like GreenSock exist to make animating our Vue apps exciting.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## What is GreenSock?

The GreenSock Animation Platform, also known as GSAP, is a powerful JavaScript animation library that helps developers build performant and engaging animations. It has a very shallow learning curve and requires little knowledge of JavaScript.

According to the platform’s [official website](https://greensock.com/gsap/), GSAP “animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to [20 times faster](https://greensock.com/js/speed.html) than jQuery).”

GSAP is framework-agnostic and can be used across anywhere JavaScript runs. It has a very minimal bundle size and won’t bloat your app. It is backward-compatible and works with SVG pretty well.

In this tutorial, we’ll explore the building blocks of GreenSock and learn how to use it with a JavaScript animation library to bring user interfaces to life by animating our Vue app contents.

## Prerequisites

The following is required to follow along with this tutorial, which uses the latest version of GreenSock, GSAP 3.0:

- [Node.js 10x](https://nodejs.org/en/download/) or higher and [Yarn](https://yarnpkg.com/lang/en/)/[npm 5.2 or higher](https://www.npmjs.com/get-npm) installed on your PC
- Basic knowledge of JavaScript, [React](https://reactjs.org/docs), and/or [Vue](https://vuejs.org/v2/guide) fundamentals
- [Vue](https://vuejs.org/) CLI installed on your PC

You can install Vue CLI with the following command using Yarn:

```jsx
yarn global add @vue/cli
```

## Getting started

First, create a project with this command:

```jsx
vue create vue-gsap
```

Next, change to your project’s root directory with this command:

```jsx
cd vue-gsap
```

Type in the following to add GSAP as a package to our project:

```jsx
Using Yarn

yarn add gsap
```

You can include GSAP in your pages or component files with this command:

```jsx
import { gsap } from "gsap";
```

## The fundamentals of GSAP

Let’s take a closer look at the basic building blocks of GSAP.

### Tween

A tween is the single instance of what applies predefined property values to an object during the process of animating an object from one point to another on a webpage.

It takes in three parameters:

1. `Target` refers to the item(s) you want to animate. It could be a CSS selector or a an object
2. `varsObject` is an object that contains the properties to change in a target, also referred to as configuration variables. They can be CSS properties, but in camelCase format `background-color` becomes `backgroundColor` and `border-radius` becomes `borderRadius`
3. `position` is used to set the point of insertion of a tween in an animation sequence. It can be either a string or a number

Tweens are written in the following format:

```jsx
gsap.method('selector', { }, 'position ' )
```

### GSAP methods

GSAP provides myriad methods to create animations. The following are among the most important.

`gsap.to()` defines the values to which an object should be animated — i.e., the end property values of an animated object — as shown below:

```jsx
gsap.to('.circle', {x:500, duration: 3})
```

This command would move an element with a class of `circle` 500px across the x-axis in three seconds. If a duration is not set, a default of 500 milliseconds would be used.

Note: The CSS transform properties `translateX` and `translateY` are represented as `x` and `y` for pixel-measured transforms and `xPercent` and `yPercent` for percentage-based transforms, respectively.

{% codepen https://codepen.io/jola_adebayor/pen/oNNmzjy %}

`gsap.from()` defines the values an object should be animated from — i.e., the start values of an animation:

```jsx
gsap.from('.square', {duration:4, scale: 2})
```

This command resizes the element with a class of `square` from a scale of 2.

{% codepen https://codepen.io/jola_adebayor/pen/YzzBNKV %}

`gsap.fromTo()` lets you define the starting and ending values for an animation. It is a combination of both the `from()` and `to()` method.

```jsx
gsap.fromTo('.circle',{opacity:0 }, {opacity: 1 , x: 500 , duration: 2 });
```

This command animates the element with a class of `circle` from an opacity of 0 to an opacity of 1 across the x-axis in 2 seconds.

{% codepen https://codepen.io/jola_adebayor/pen/yLLZgzB %}

Note: When animating positional properties, such as `left` and `top`, the elements you’re animating must have a CSS `position` value of `absolute`, `relative`, or `fixed`.

### Easing

Easing determines how an object moves from one point to another. An ease controls the rate of change of an animation in GSAP and is used to set the style of an object’s animation.

GSAP provides different types of eases and options to give you more control on how your animation should behave. It also provides an [Ease Visualizer](https://greensock.com/docs/v3/Eases) to help you choose your preferred ease settings.

![GreenSock Ease Visualizer](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/11/greensock-ease-visualizer.png?resize=730%2C635&ssl=1)

There are three types of eases, and they vary in how they begin or end animating.

- `in()` — Motion starts slowly, then picks up pace toward the end of the animation
- `out()` — The animation starts out fast then slows down at the end of the animation
- `inOut()` — The animation starts slow, picks up pace midway through, and ends slowly

{% codepen https://codepen.io/jola_adebayor/pen/OJJdQQg %}

In the last example, we chained three tweens that displayed the available types of eases, but we had to set a delay of the number of seconds it takes the animation to complete before starting the next one. You can avoid this by putting the tweens in a timeline.

### Timelines

A `Timeline` serves as a container for multiple tweens. It animates tweens in a sequence with each beginning just after the last one ends, except when set otherwise, and it is not dependent on the duration of the previous tween. This eliminates the need to set a delay before the next tween begins animating.

Timelines can be created in the following format:

```jsx
gsap.timeline(); //creates an instance of a timeline
```

You can also chain multiple tweens to a timeline, as shown below:

```jsx
gsap.timeline()
    .add() // add tween to timeline 
    .to('element', {})
    .from('element', {})
```

or

```jsx
const tl = gsap.timeline(); // create an instance and assign it to variable tl
tl.add(); // add tween to timeline 
tl.to('element', {});
tl.from('element', {});
```

Let's recreate the previous example with a timeline:

{% codepen https://codepen.io/jola_adebayor/pen/WNNmeaM %}

### Position

The position parameter is an important factor in animating with a timeline because it sets the point of insertion of a tween in an animation sequence. As we learned earlier, it is the third parameter in a tween method and it comes after the config object.

```jsx
.method( target, {config object}, position )
```

The default position is `"+=0"`, which just inserts a tween at the end of a sequence.

You can set the position parameter as multiple types of values, but we’ll focus on some of the most important ones.

`"Number"` refers to an absolute time of that number.

```jsx
gsap.method('selector',{}, 5 )
```

The above command inserts the tween exactly 5 seconds from the beginning of the timeline.

`"+=Number"` or `"-=Number"` inserts a tween at a positive or negative relative time, as demonstrated below:

```jsx
gsap.method('selector',{}, "-=1" ) //insert a tween 1 second before end of timeline

gsap.method('selector',{}, "+=1" ) //Inserts a tween 1 second after end of timeline
```

`"<"` or `">"` inserts a tween relative to the previous tween’s start or end time.

```jsx
gsap.method('selector',{}, "<" ) //Inserts a tween at the start of the previous tween

gsap.method('selector',{}, ">" ) //Inserts a tween at the end of the previous tween
```

[GreenSock’s official website](https://greensock.com/position-parameter) offers additional tips to help you gain a thorough understanding of the position parameter.

## Alternatives to GSAP for animating Vue

While GSAP is a very good choice to animate Vue apps, there are alternatives, including:

- [Anime.js](https://animejs.com/)
- [Mo.js](https://github.com/mojs/mojs)
- [Velocity.js](http://velocityjs.org/)
- [animated-vue](https://github.com/radical-dreamers/animated-vue#readme)

## Conclusion

In this article, we’ve covered how to use GreenSock to create animations. The possibilities are endless when animating with GreenSock because you can get more done with less code without worrying about backward compatibility while maintaining great performance across browsers.

Beyond the shallow learning curve, GSAP has very large community of users, [resources](https://greensock.com/learning/) abound and active [forums](https://greensock.com/forums/) that contain many of the answers you may be looking for.

The [official GreenSock documentation](https://greensock.com/get-started) is quite extensive and covers features and other useful methods not mentioned in this article. You can also check out this [Vue animation workshop repository](https://github.com/sdras/animating-vue-workshop) open-sourced by Sarah Drasner.

* * * 
**Editor's note:** Seeing something wrong with this post? You can find the correct version [here](https://blog.logrocket.com/animating-vue-with-greensock/).

## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *
The post [Animating Vue with GreenSock](https://blog.logrocket.com/animating-vue-with-greensock/) appeared first on [LogRocket Blog](https://blog.logrocket.com).