Animations 101 — Using Greensock

Daniela Gomez
Jan 4 · 4 min read

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.

Image for post
Image for post

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 :).

The Startup

Medium's largest active publication, followed by +752K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store