GreeenSock Animations with JavaScript

By Harshita Shree

GSAP animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects). It provides a reliable way of applying and customising animations in web

Hello,

Today, websites are all about having the best user interface and web animations are one of those features which takes our website to a whole new level of interactivity. It makes our content visually appealing and impressive. The screen is the new playground!

However, building animations from scratch using CSS can be really cumbersome sometimes. But here is hack to this problem.

The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever). It provides a much more reliable and robust way of applying animations to websites.

 

There are many ways to get GSAP some which include

Download
Install Helper
CDN (easiest & fastest load)
NPM 

 

GSAP offers some amazing tools to incorporate both interactive and non-interactive animations easily.GSAP lets you choose from four libraries—TweenLite, TweenMax, TimelineLite and TimelineMax .TweenMax has more features than TweenLite; TimelineMax has more features than TimelineLite.

A tween is a single movement in an animation. In GSAP, a tween has the following syntax:

TweenMax.method(element, duration, vars)

method- refers to the GSAP method you’ll like to tween with.

element- is the element you want to animate. 

duration- is the duration of your tween. It is an integer in seconds.

vars-is an object of the properties you want to animate. 

 

The following is a code snippet that illustrates a few basic animations done with gsap.

The following two CDN’s have been utilized to achieve the given animation:

 

1)

2)

 

GSAP offers us to customize the animation by giving us a variety of options.

In the code below the “Ease” features allows us to time our animations. The “Ease” feature can take a number of values like- bounce, power, slow, rough,  elastic and many more.

The MotionPath plugin used is a feature that animates any object along a path (or even through arbitrary property values).

 

// selector text:

motionPath: {

  path: "#pathID"

}

 

// or direct reference to a element:

let myPath = document.querySelector("#pathID");

...

motionPath: {

  path: myPath

}

 

These are just a glimpse of what GSAP can do. There are a bunch of cool features that you can play around with and come up with amazing visuals.