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 functionsGSAP
always compatible with many browsers such as IE, FF …
Animate DOM element
We have a div with class ball
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> ball <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 | gsap <span class="token punctuation">.</span> <span class="token function">to</span> <span class="token punctuation">(</span> <span class="token string">'.ball'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> duration <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> x <span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">,</span> scale <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token property">x</span> <span class="token punctuation">:</span> 100 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">translateX</span> <span class="token punctuation">(</span> 100px <span class="token punctuation">)</span> <span class="token property">y</span> <span class="token punctuation">:</span> 100 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">translateY</span> <span class="token punctuation">(</span> 100px <span class="token punctuation">)</span> <span class="token property">z</span> <span class="token punctuation">:</span> 100 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">translateZ</span> <span class="token punctuation">(</span> 100px <span class="token punctuation">)</span> <span class="token property">scale</span> <span class="token punctuation">:</span> 2 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">scale</span> <span class="token punctuation">(</span> 2 <span class="token punctuation">)</span> <span class="token property">scaleX</span> <span class="token punctuation">:</span> 2 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">scaleX</span> <span class="token punctuation">(</span> 2 <span class="token punctuation">)</span> <span class="token property">scaleY</span> <span class="token punctuation">:</span> 2 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">scaleY</span> <span class="token punctuation">(</span> 2 <span class="token punctuation">)</span> <span class="token property">scaleZ</span> <span class="token punctuation">:</span> 2 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">scaleZ</span> <span class="token punctuation">(</span> 2 <span class="token punctuation">)</span> <span class="token property">skew</span> <span class="token punctuation">:</span> 15 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">skew</span> <span class="token punctuation">(</span> 15deg <span class="token punctuation">)</span> <span class="token property">skewX</span> <span class="token punctuation">:</span> 15 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">skewX</span> <span class="token punctuation">(</span> 15deg <span class="token punctuation">)</span> <span class="token property">skewY</span> <span class="token punctuation">:</span> 15 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">skewY</span> <span class="token punctuation">(</span> 15deg <span class="token punctuation">)</span> <span class="token property">rotation</span> <span class="token punctuation">:</span> 180 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotate</span> <span class="token punctuation">(</span> 180deg <span class="token punctuation">)</span> <span class="token property">rotationX</span> <span class="token punctuation">:</span> 180 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateX</span> <span class="token punctuation">(</span> 180deg <span class="token punctuation">)</span> <span class="token property">rotationY</span> <span class="token punctuation">:</span> 180 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateY</span> <span class="token punctuation">(</span> 180deg <span class="token punctuation">)</span> <span class="token property">rotationZ</span> <span class="token punctuation">:</span> 180 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">rotateZ</span> <span class="token punctuation">(</span> 180deg <span class="token punctuation">)</span> <span class="token property">perspective</span> <span class="token punctuation">:</span> 1000 // <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">perspective</span> <span class="token punctuation">(</span> 1000px <span class="token punctuation">)</span> <span class="token property">transformOrigin</span> <span class="token punctuation">:</span> <span class="token string">'50% 50%'</span> // <span class="token property">transform-origin</span> <span class="token punctuation">:</span> 50% 50% |
The same goes for SVG
1 2 3 4 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> svg</span> <span class="token attr-name">viewBox</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 0 0 500 400 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> circle</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> ball <span class="token punctuation">"</span></span> <span class="token attr-name">cx</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 80 <span class="token punctuation">"</span></span> <span class="token attr-name">cy</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 80 <span class="token punctuation">"</span></span> <span class="token attr-name">r</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 80 <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> svg</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 | gsap <span class="token punctuation">.</span> <span class="token function">to</span> <span class="token punctuation">(</span> <span class="token string">'.ball'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> duration <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> x <span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">,</span> scale <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
Eases
As mentioned above, GSAP
supports many Easing functions, such as
1 2 3 4 5 6 7 | gsap <span class="token punctuation">.</span> <span class="token function">to</span> <span class="token punctuation">(</span> <span class="token string">'.ball'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> duration <span class="token punctuation">:</span> <span class="token number">1.5</span> <span class="token punctuation">,</span> x <span class="token punctuation">:</span> <span class="token number">200</span> <span class="token punctuation">,</span> scale <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> ease <span class="token punctuation">:</span> <span class="token string">'bounce'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
We can add a delay time as follows
1 2 3 4 5 6 7 8 | gsap <span class="token punctuation">.</span> <span class="token function">to</span> <span class="token punctuation">(</span> <span class="token string">'.ball'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> duration <span class="token punctuation">:</span> <span class="token number">1.5</span> <span class="token punctuation">,</span> delay <span class="token punctuation">:</span> <span class="token number">1.5</span> <span class="token punctuation">,</span> x <span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">,</span> scale <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> ease <span class="token punctuation">:</span> <span class="token string">'back.inOut(3)'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
I hope that this article can help you access the Greensock(GSAP)
library Greensock(GSAP)
more easily. Thanks for reading. Refer