GSAP 101: Beginner's Introduction to Web Animation
Hey!
In this post, we'll dive into the world of web animations with GSAP. We'll take a closer look at the key features of GSAP, its ease of use, performance optimizations, and so much more. We'll also explore some practical examples and use cases to showcase the power and flexibility of GSAP in creating captivating web animations.
In today's dynamic web landscape, animations play a crucial role in creating engaging and interactive user experiences. Whether it's adding subtle transitions, complex animations, or interactive effects, animations can elevate the visual appeal and interactivity of websites and web applications. One powerful tool that has gained widespread popularity among web developers and designers for creating stunning animations is GSAP (GreenSock Animation Platform).
The best way to learn is by doing. The code examples will be editable. As you read, make some changes and see the results.
Getting started
GSAP has a variety of options you can choose from to get started. For this tutorial, we'll use the cdn as it's easier and super fast.
Include the script tag and let's begin. Just google "gsap cdn".
Let's create a div with the class of 'circle' and style it. Let's jump into our js file and start animating.
A single animation like this is called a 'tween', because it animates between states. The animation is us saying us telling gsap, "hey! Animate this element and move it to x, which has a value of 100px. This is just like css transform:translate(100px)
syntax
Let's take a closer look at the animation syntax
Let's go over the syntax
1. Method
gsap.to() is the animation method. This informs gsap that our animation will begin at the current state and animate "to" the given value.
There are several other methods like:
gsap.from(). The animation begins "from" the value defined and animates towards its current value
gsap.fromTo().Here we provide both starting (from) and ending(to) values.
gsap.fromTo( " .logo",
{ opacity: 0, scale:.5 },
{ opacity: 1, scale: 1.5}
)
In the first pair of culry brackets, we define the from values.
The second pair of curly brackets contains the to values. Here is where you place in any special attributes (discussed later in the post).
gsap.set(). This is used to set the initial values of the properties for a target element, without animating them.
2. Targets
After defining the method, we have to tell GSAP what we want animated.The target can be a 'selector text', 'variable', 'object' or even an 'array'.
In our syntax above, when we use the selector text, GSAP uses the browser 'querySelectorAll' method to find all matching elements. In this case it's just the element with the class of 'circle'.
Here's how we can pass in multiple selectors:
gsap.from(" .logo, #circle , h4 " ,
{ opacity: 0, x: 100 }
)
3. Variables
Here we define any property that we want to animate, e.g., backgroundColor, opacity, borderRadius. Along with these, we can also include special properties like delay, duration and ease, that controls the behavior of the tween.
GSAP defaults to using pixels (px) and degrees for transforms, but it offers the flexibility to use other units such as viewport width (vw), radians, or even custom JavaScript calculations for values.
To change the backgound color in CSS, we would simply write background-color. But since GSAP is JavaScript, we use camelCase. So instead of a dash (which JavaScript would interpret as a minus sign), we capitalize the second word and discard the dash. Something like this: backgroundColor.
What can we animate?
With gsap, you can animate almost anything.
Well, I can't just say gsap can animate anything, and leave it at that. Let's go over some of these things.
CSS Properties. You can animate CSS properties such as opacity, width, height, margin, padding, color, and many more.
SVG Properties. Gsap allows you to animate SVG properties, such as stroke, fill, and transform, to create animated graphics and visual effects.
Scroll-related properties. With gsap, you can animate scroll-related properties, such as scrollTop, scrollLeft, and scrollTrigger, to create smooth scrolling effects and parallax animations.
Custom properties. provides support for animating custom properties, which allows you to create your own custom animations based on your specific needs.
For smoother animations, it's best to use transforms for animating elements instead of layout properties like "top", "left", or "margin". Transforms are optimized for animation, and using them can result in smoother animations.
Special Properties
I mentioned that we can include some special properties that could tweak our animations. We'll go over some of the special properties available in gsap.
stagger
This special property allows you to stagger the start time of multiple tweens, creating a cascading or sequential effect. You can use it with methods like from(), to(), and fromTo() to apply a staggered delay to each tween, creating a visually appealing and synchronized animation.
yoyo
This allows you to create a "yoyo" or "ping-pong" effect, where the animation plays in reverse after completing one iteration.
in order to make a tween yoyo, you must set its repeat to a non-zero value
ease
This lets you specify custom/existing easing functions and parameters for your animations. You can use them to create custom timing functions, easing curves, and motion effects, providing precise control over the animation's timing and easing.
You can check more of the ease functions here
repeat
This does exactly as the name suggests. It allows you to play an animation multiple times. Repeat is usually used with yoyo to achieve a smooth back and forth animation. Add yoyo and set its value to true.
use repeat: -1 to make your animations run infinitely.
delay
This lets you specify a delay before an animation starts. It is used in conjunction with methods like to(), from(), and fromTo() to introduce a delay before an animation begins.
Gsap Timelines
So what happens when we want to have multiple animations, and we want the animations to be aware of either preceding or succeeding animations. This is what I mean.
Say we have three animations(anim1, anim2 and anim3) that we want to play one after the other. We want anim2 to play 2 seconds after anim1 is done, and anim3 to play 3 seconds after anim2 is done. We can achieve this by using the delay property. But things start to get messy when we want to tweak the delays to ensure that the animations run sequentially, because then we'll have to change the delay property of each tween(animation). Tweaking the delays for the 3 animations isn't much a task. But what if we have 12 animations? That'll be a lot of work.
That's where gsap timelines come in handy. It allows us to create a timeline of animations and control their playback in a sequence or in parallel.
A Timeline is a container for multiple animations, and you can add animations to it using various methods like to(), from(), fromTo(), etc. These animations will be played one after another in the order they are added to the timeline by default.
Here's how we can create a sequence of animations using a timeline.
In this example, we created a timeline tl and added four animations to it in sequence. The animations will play one after another, with a duration of 1 second each. You can customize the duration, easing, and other properties of each animation as needed.
You can also use methods like from(), fromTo(), and set() to add different types of animations to the timeline. Additionally, you can use methods like delay(), repeat(), and yoyo() to add delays, repeat, and reverse animations within the timeline.
Moreover, you can control the playback of the timeline using methods like play(), pause(), reverse(), restart(), and seek() to have fine-grained control over the timing and sequencing of animations.
Timelines are one of the most important concepts of gsap. We'll go over timelines in details in a future post.
Thanks for reading :)