Blog

Animate with GSAP

In order to create beautiful looking JavaScript applications a developer should consider enriching his apps with eye-catching transitions and animations. There are many JavaScript libraries on the web which help out developers with programmatic animation but to me web animation just became a whole lot easier using the GreenSock JavaScript libraries. They give you a vast array of options when selecting the necessary tools to make any animation on your site come alive. GSAP animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever).

More information about the Greensock Animation Platform can be found on the official Greensock web page at http://greensock.com/.

# Why using GSAP insted of CSS animations

  • Browser bugs, inconsistencies, and compatibility: An animation library, like GSAP, solves these for you and is universally compatible. You can even use motion paths in IE9! There are many problematic areas when it comes to cross-browser issues, including handling transform-origin on SVG elements, path stroke measurements, 3D origins in Safari, and many more that we don’t have the space to list.
  • Runtime control: Using a good animation library can enable you to pause, resume, reverse, seek through, or even gradually change the speed of an entire animation sequence. You can control each transform component independently (rotation, scale, x, y, skew, etc.). You can also retrieve those values at any time as well. JavaScript animations give you ultimate flexibility.
  • Easing options: CSS only gives you two control points for eases. GSAP’s CustomEase lets you literally create any ease you can imagine. The library provides you different types of eases and options to give you more control on how your animation should behave. It also provides an Ease Visualizer to help you choose your preferred ease settings.
  • Use relative values:Animate values relative to their current value. GSAP recognizes += and -= prefixes for this. So x: "+=200" will add 200 units (usually pixels) to the current x. And x: "-=200" will subtract 200 from the current value. This is also useful in GSAP’s position parameter when positioning tweens relative to one another.

# An example

I am going to give you a simple example how I did a smooth nice image hover animations using GSAP. I've added comments to make it easier for you to explore the code.

Let me give you a short list with the options that you are going to see in this example:

  • jumpToRandomPosition: If `true` the particles on every frame will jump to random position. Else the particles will move randomly without jumping. Defaults to `false`
  • growAndShrink: If `true` the particles will grow & shrink, it will grow .8 times larger than the radius. Defaults to `false`
  • fill: If `true` the particles are filled with the current pixel color that they are on, else they will be stroked for that same color. Defaults to `true`
  • bounceFromEdges: If `true` the particles will bounce back when they hit the (specified) edges, or else thay will continue their path from the opposite edges/walls. Defaults to `true`.
  • shape: You can specify what shape of the particles. Currently you can specify any one from the following, i.e. "circle", "square", "hexagon". If not specified then it defaults to "circle"
  • radius: You can specity the radius of the particles, defaults to "5" if not specified.
  • randomRadius: If `true` then the particles will have random radius, else defaults to `false`
  • maxRadius: You can specify the minimum radius of the particles, else defaults to "2"
  • minRadius: You can specify the maximum radius of the particles, else defaults to "5"
  • maxVelocity: You can specify the maximum velocity of the particles, else defaults to "8"

Okay that's it, that's all the options I could add. I would recommend you also to play around with GSAP and see what fits for you.