Animate with Greensock

Tram Ho

There are many ways to do animations on the web, and today I would like to introduce a great way to animate that is to use the Greensock library (GSAP) .

GSAP makes control of properties easy

Animation is basically changing the values ​​of an attribute multiple times in an optical time. GSAP takes the initial and ending value of an attribute and animate it 60 times per second. That’s why it was named “GreenSock Property Manipulator” (GSPM) but because the name was not very good, they changed it to GSAP .

Interact with DOM, SVG, Canvas and more

GSAP almost animate everything on the web, for example:

  • CSS : 2D and 3D transforms , colors , width , opacity , border-radius , margin and nearly every CSS property.
  • SVG : viewBox , width , height , fill , stroke , cx , r , opacity .
  • Or any numeric value in Canvas .

Fast and smooth

  • GSAP can animate everything that JavaScript can reach, at a fast pace (20 times faster than JQuery)
  • GSAP supports many easing functions
  • GSAP always compatible with many browsers such as IE, FF …

Animate DOM element

We have a div with class ball

To animate this div , we tell GSAP that we should take a ball class div and change .to() some properties. x: 200 translated into CSS will be transform: translateX(200px) , likewise we can declare as follows

The same goes for SVG


As mentioned above, GSAP supports many Easing functions, such as

We can add a delay time as follows

I hope that this article can help you access the Greensock(GSAP) library Greensock(GSAP) more easily. Thanks for reading. Refer

Share the news now

Source : Viblo