A Journey into Animated Loaders with GSAP - Part 1
Among the many great tutorials on this subject, this walkthrough promises to be just about average.
Go ahead and start with an ice cold shower ’cuz the tip of this episode is gonna be hot!
In this article, I’m going to be showing you a little about how to craft animations using the amazing GSAP library.
If you’ve never ever heard about this beauty, it’s the perfect moment to mosey over to the GSAP Library itself.
GSAP, or Greensock Animation API, combines animation capabilities and performance in a friendly API. With this library, the possibilities are as big as the resulting file size is small. The sky truly is the limit.
To demonstrate GSAP’s superpowers, I’ll split this tutorial into three parts, each demonstrating a different loader animation that uses some elements of the API.
Here are the three little piggies.
3 dots
Bouncy ball
Infinite symbol
Long story short
Before we begin, I should tell you about the 4 libraries inside GSAP:
- TweenLite
- TweenMax
- TimelineLite
- TimelineMax
The Tween is used to create single animations. The Timeline is used to chain animations, allowing us to develop a continuous flow.
The suffixes Lite and Max are there only to differentiate the amount of features present in each library.
Installing GSAP
There are many ways to accomplish this sacred deed:
- Download the .zip file directly from their website
- Include the CDN url for the script
- Use
npm install gsap
My preference is to always take the quickest, easiest path (not just here, but in life) so let’s use a CDN approach by placing the TweenMax script into our code (don’t tell anyone: this is the one that contains all the libraries).
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js">
OK, done.
Getting our hands dirty
For our first loader, let’s create an animation of a square becoming a ball and vice versa. I mean, is there anything more exciting than that?
Start by creating the HTML and the CSS.
<div class="square-ball"></div>
<div class="square-ball"></div>
<div class="square-ball"></div>
For the CSS, I like to first reset the elements. Then, I center everything using flexbox.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #C7D3BF;
}
Finally, we add some style to these boring squares.
.square-ball {
width: 40px;
height: 40px;
background-color: #04A777;
border: 5px solid #048962;
transform: rotate(45deg);
margin: 0 15px;
}
With everything set, let me take a moment to tell you more about the library.
The bread and butter of GSAP
The simplest animation of the library is called a tween, which is nothing more than a single behavior in the animation.
Tween syntax looks like this:
TweenMax.method(element, duration, props)
methodis the GSAP method we’re going to use for the animationelementis the element we’re going to animate. This could be an array of elements as well.durationis measured in seconds and it’s an integer number.propsis an object with css properties used in the animation.
To contextualize what we’re going to do next, let me take you through some GSAP basic methods:
TweenMax.from
Animates the elements from values you pass via the props argument to the element’s current CSS properties.
TweenMax.to
Animates the elements from the element’s current CSS properties, to the values you pass via the props argument.
TweenMax.fromTo
Animates the elements solely using values passed via the props argument.
A little about props
The props argument is an object that specifies the CSS properties to use in the animation. To use it, you first need to format the usual CSS properties with camel case
For example:
var props = { backgroundColor: 'red', borderRadius: '50%'}
You can also animate transformations. For that, the properties are a bit different:
var props = {
x: 100, // It's equivalent to translateX
y: 100, // It's equivalent to translateY
rotation: 45 // It's equivalent to rotate, and it's in degrees
}
Keep in mind, this is how the axes work for those transformations. This is a very important detail.
Here we go. Animating our loader!
Now that we covered the basics of the library, let’s put what we’ve learned into action.
We begin by selecting the elements we want to animate:
var element = document.querySelectorAll('.square-ball');
Then we create a tween using the method .to() and add a time of 1 second for the animation.
TweenMax.to(element, 1, {});
Now we add the properties. Here we specify what final state we would like to achieve:
- Scale down to 60% of its size
- Have rounded borders, i.e. become a ball
- Spin
TweenMax.to(
element,
1,
{ scale: .6, borderRadius: '50%', rotation: 360});
Cool, we have our first animation up and running. However, note that the element is animated only once. Let’s change that by adding the repeat property and passing down the value -1.
This value tells our animation to repeat forever.
TweenMax.to(
element,
1,
{ scale: .6, borderRadius: '50%', rotation: 360, repeat: -1});
Even though it’s repeating, there is something off. The animation is not fluid. Each time, it starts from its original state: a square.
To fix this, let’s use the magical property yoyo: true. That property says to the animation “Dude, when you finish, retrace your steps back to the beginning and start again”:
TweenMax.to(
element,
1,
{ scale: .6, borderRadius: '50%', rotation: 360, repeat: -1, yoyo: true});
For fun, let’s delay the repeat with repeatDelay:
TweenMax.to(
element,
1,
{ scale: .6, borderRadius: '50%', rotation: 360, repeat: -1, repeatDelay: .5, yoyo: true});
voilà! We have our first loader.
Stay tuned for the next episode of this series. We’ll be jumping into the deep, open ocean that is the TimelineMax library. Who knows if we’ll make it out alive.
