Animation with Vue.js and GreenSock

Front-end is a vital component of any product’s success. There are a few exciting options when it comes to JavaScript frameworks for the front-end. Vue.js is one such option that is slowly becoming popular amongst developers because of the features like Virtual DOM, Data Binding, Components, Event Handling, Animation/Transition, Computed Properties, Templates, and Directives. In this blog, I will talk about one of these key features — animation and how to animate Vue.js with GreenSock.

What is GreenSock?

The GreenSock Animation Platform (GSAP) is a powerful JavaScript animation library developers use to develop engaging and performant animations. Developers prefer GSAP for animation over CSS and other libraries because of its compatibility with all browsers. The GreenSock Animation Platform is widely used in Google Web Designer (GWD) to create advertisement banners and also in gaming & on websites. Google too recommends using GSAP for creating JavaScript animations.

GASP claims to be able to animate everything JavaScript touches with blazing speed. It is compatible with SVG, HTML, Vue, React, jQuery, Angular, CSS, Canvas, new & old browsers, mobile, and more.

How to install GSAP

To add GSAP to your project using NPM, use the following command:

npm install gsap

Include GSAP in your pages or component files with this command:

import { gsap } from "gsap";

What is Tween?

Tween, or Tweening in the animation world, is short for in-between animation. Tweens help transition one animation from one keyframe to another over a given duration. A Tween performs all the animation tasks and is a high-performance property setter. Targets are objects you wish to animate, and you need to feed them with time duration and other properties that need animation. The Tween’s playhead shifts to a new position, figures out the property values necessary at that point and applies them accordingly.

There are three parameters:

• 1] Target: These are the objects you are animating. They can be raw objects, an array of objects, or selector texts like”.myClass”.
• 2] vars {}: It is an object with property/value pairs that you want to animate. along with any of the optional special properties like onComplete, onUpdate, etc.
• 3] Position: Position sets the insertion point of the tween in an animation sequence. It can be either a number or a string.

Tweens are written in the following format

gsap.method('selector', { }, 'position');

Please note that CamelCase does not accept hyphenated properties. font-size should be fontSize, border-radius should be borderRadius. background-color must be backgroundColor.

When animating positional properties like left and top, it is imperative that the elements you’re moving have a CSS position value of absolute, relative, or fixed…Read more