This content originally appeared on DEV Community and was authored by Sowjanya
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});
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';
GSAP:
gsap.to('div', 1, { backgroundColor: 'red'});
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.
This content originally appeared on DEV Community and was authored by Sowjanya
Sowjanya | Sciencx (2021-10-21T07:58:09+00:00) Get Started GSAP. Retrieved from https://www.scien.cx/2021/10/21/get-started-gsap/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.