You have probably heard of CSS animations, in this article I will introduce to you to a way of doing it using Greensock (GSAP).
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.
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
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() 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
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).
.from() function works like a mirror, the animation will affect the elements in the opposite way as the values you put in the
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
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
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 :).