Animations 101 — Using Greensock

You have probably heard of CSS animations, in this article I will introduce to you to a way of doing it using Greensock (GSAP).

GSAP allows you to code your animations using javascript, giving them modularity and reusability, it also opens the possibility to add some logic quirks to your website, by connecting your animations to triggered events.

You can think of GSAP as properties manipulator.

Say you have an object, you can make it fade away by manipulating its opacity, or make it move by altering its position on Y axis, having this in mind, we can start with a practical example.

Getting started

First, we need to include GSAP in our project, for this example, we will use the cdn , this needs to be added in the HTML inside a script tag

<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

Note that we are using GSAP 3, which is the last version.

As we said, GSAP is a properties manipulator. We can animate something from a state/position or take it to another one.

Let’s see how it works with some code.

Gsap.to()

The gsap.to() function takes the element to a desired status. In this case we are taking the geo-forms 400px in the X axis, it takes it to the right, since we are giving in a positive number.

Let’s analyze the anatomy of a gsap function.

We can use typical querySelectors, .foobar to get all elements affected by a HTML class and #foobar to select id-marked elements, it also accepts an array in order to apply the same animation to multiple elements.

The properties object is where the magic happens. There are plenty of properties you can alter, those are based on CSS. You can play with the scale, rotation and so on.

The properties object can alter can take multiple parameters at the same time

In this new to() we are altering several properties, in the first one, the scale and the position in the Y axis. In the second one, we are altering just the square by accessing through the querySelector notation and making it rotate.

Now, we have clear with the .to() function, now is time to take it up to the .from()

Gsap.from()

The anatomy and structure of this function is exactly the same as the .to() , the only difference is the oder in how the alteration to properties occurs.

Let’s check this pen

As we can see in our CSS, we have not defined any Y position or opacity for this elements, however the animation is taking them from a Y position 200px up into the positive axis, as if the elements were located at -200px down. The elements are also appearing, since we are modifying the opacity. we are telling our program to take the elements from from total opacity (0) to a visible point (opacity: 1).

The .from() function works like a mirror, the animation will affect the elements in the opposite way as the values you put in the properties object.

Gsap.fromTo()

yes, is a mixing of these two functions, let’s see how it works with an example.

This function allows you to control the initial and final positions of the elements you would like to animate, with the respective from() and to() functionalities that we already discovered. Let’s check the anatomy of this function.

As we see in the pen, the figures are starting the animation further to the right of the container (400px to the positive X axis) and ending the movement to the left, 100px exactly to the left border of the container.

Not all properties have to be defined in both objects, we can simply make the elements rotate without defining a starting position for them.

Now, we may want to smooth the animations and give them some kind of flow, we come to the concept of easing

Easing

Let’s take the first pen we have and just add some easing :P to see how it looks like in code

Imagine your animation as a curve, the easing property allows you to finish that curve in the way you want, it makes the animation look smooth and fluid.

There are many kinds of easings, it is up to you to discover and play with them :).

Why use JS animations over CSS?

Using JS adds dynamism to the animation process by providing reusability and modularity.

There is an important concept in GSAP called timeline, every animation can be conceived as node inside a timeline, that means many nodes can build a nice and fun timeline.

Timelines

Let’s analyze this chunk of code

function animateX (node, xValue) {
  const timeline = gsap.timeline()
  
  timeline.from(
  node,
    {
      x: xValue,
      ease: 'power4.out',
      duration: 2
    }
  )
  
  return timeline
}
mainTimeline.add(animateX(circle, 200))
mainTimeline.add(animateY(square), '+=0.5')
mainTimeline.add(animateX(triangle, -200), '+=1')

the function animateX accepts two parameters node which corresponds to the selector (HTML element that we want to affect by the animation) and xValue in this case, this is the starting position in the X axis for our animation.

A timeline object is also being created in the second line of code, this will be the link that can be added to a main timeline.

As we can see, this function could exported and reused with any other HTML element :)

the final block of code is where the magic happens, there is a main timeline, where this little timeline objects can be added, the second argument is the delay for the animation start.

This opens a bunch of possibilities since it allows the animations to be treated as frames by play with the cascade property of the DOM .