DEV Community

Sowjanya
Sowjanya

Posted on

Get Started GSAP

Learn the basics of GSAP in this article.

What is GSAP?

GSAP(Greensock Animation Platform) is a JavaScript library which can animate CSS properties, SVG, React, canvas, generic objects and many other things. It is 20 times faster than jQuery and solves countless browser inconsistencies.

Install GSAP

There are many ways you can use GSAP. Given below is the many ways and how to do it. Here is the GSAP Installation Page

Download

You can download GSAP from the zip file here. If you want help here is the GSAP Install Helper

Use CDN

Using CDNs are highly recommended because they're so widely cached and load super-fast.

Docs - https://greensock.com/docs/v3/Installation#cdn
Get CDNs - https://greensock.com/docs/v3/Installation#CDN

NPM

Docs - https://greensock.com/docs/v3/Installation#npm-club
Input in code - https://greensock.com/docs/v3/Installation#modules

GitHub

Docs - https://greensock.com/docs/v3/Installation#github

CodePen

Using CodePen or GSAP has a lot of advantages, you get to use all the Club GreenSock Plugins for free.

Docs - https://greensock.com/docs/v3/Installation#codepenContentSection
Template - https://codepen.io/GreenSock/pen/aYYOdN
URLs - https://greensock.com/docs/v3/Installation#codepen

Club Greensock

In Club Greensock you pay for extra plugins, but as said in CodePen you can use all the plugins for free, but if you want to do it outside CodePen you have to get Club Greensock membership.

Get Membership - https://greensock.com/club
See the Plugins available in Club Greensock - https://greensock.com/club/#feature-list

Code your first animation!

Finally the coding part!

This is a basic example using to() tween:

gsap.to('#myID', {duration: 3, x: 10});
Enter fullscreen mode Exit fullscreen mode

If you notice there are two things that make this animation work, there are : target and var.

The target is the object your animating, this can be a raw object, an array of objects, or selector text like ".myClass" or "#myID".

The var is an object with property/value pairs that you're animating to (like opacity:0.5, rotation:45, etc.) and other optional special properties like duration and onComplete. You can also add CSS style raw instead of doing it in the long js way.

JS:

let div = document.querySelector('div');
div.style.backgroundColor = 'red';
Enter fullscreen mode Exit fullscreen mode

GSAP:

gsap.to('div', 1, { backgroundColor: 'red'});
Enter fullscreen mode Exit fullscreen mode

Note that I added the duration inside the round brackets instead of the curly ones? It can be done either ways

Here is a table of short codes for transform-related properties:

GSAP CSS
x: 100 transform: translateX(100px)
y: 100 transform: translateY(100px)
rotation: 360 transform: rotate(360deg)
rotationX: 360 transform: rotateX(360deg)
rotationY: 360 transform: rotateY(360deg)
skewX: 45 transform: skewX(45deg)
skewY: 45 transform: skewY(45deg)
scale: 2 transform: scale(2, 2)
scaleX: 2 transform: scaleX(2)
scaleY: 2 transform: scaleY(2)
xPercent: -50 transform: translateX(-50%)
yPercent: -50 transform: translateY(-50%)

Here is my first GSAP animation:


This is all there is to building a basic animation with GSAP.

Make an animation with GSAP and share it with me! I will be glad to clear your doubts in the comment.

Discussion (1)

Collapse
sowg profile image
Sowjanya Author

This is my first article hope you liked it! Feedbacks welcome!