Intro to the GreenSock Animation Platform (GSAP)

Topics covered in this JavaScript tutorial:

Loading the GSAP JavaScripts, Anatomy of a GSAP Tween, The gsap.from() Method, Tweening Multiple Properties, Easing

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to animate something in a webpage using the GreenSock Animation Platform (GSAP), which is the fastest and most robust JavaScript library for animation.

Previewing the Finished Animation

1. For this exercise we’ll be working with the GSAP Intro folder located in Desktop > Class Files > JavaScript Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
2. In your code editor, open done.html from the GSAP Intro folder.

3. Preview done.html in a browser.

   • You’ll see the Noble Desktop logo appear by scaling in (and moving up slightly). Simple, but cool! This is the finished animation you’ll be building.

   • To see the animation again, you can hit Cmd–R (Mac) or Ctrl–R (Windows) to reload the browser. Feel free to do this until you get a feel for the animation.

4. Close the browser window.
5. Back in your code editor, close done.html.
6. Open intro.html (from the GSAP Intro folder) which is file you’ll be coding in.

7. Preview intro.html in a browser.

   It’s a static logo, which we’ll be animating.

8. Back in your code editor, let’s get acquainted with the HTML. Look in the body tag and you’ll see:

   <img id="logo" src="img/noble-desktop-logo.svg" alt="Noble Desktop">
   

9. Note it has an ID of logo. We’ll be using that ID to identify this element as a target for our tweens.

Loading the GSAP JavaScripts

GSAP has a single core JavaScript file which handles animating just about any property of any object. It is relatively lightweight, yet full-featured.

GSAP’s architecture keeps the overall file size small by letting you load just the features you need. There are extra plugins (some are only available to paid Club GreenSock members), but all we need now is the GSAP core. You can see what’s included in the GSAP core file (and learn all about GSAP) at greensock.com/docs

1. Before we start animating, we need to link to the GSAP core JavaScript file. Add the following bold code before the closing </body> tag:

      </main>
      <script src="js/gsap.min.js"></script>
   </body>
   

   NOTE: While you can can use a CDN link, we’ll use a local copy of the script that we’ve included in the class files. This does not rely on someone else’s servers, and allows you to work offline if necessary.

2. Add an empty script tag below that, which is where we’ll write our own code:

      <script src="js/gsap.min.js"></script>
      <script></script>
   </body>
   

Using the gsap.from() Method

1. We’ll start by calling the gsap.from() method with the following bold code:

   <script>
      gsap.from();
   </script>
   

2. In the gsap.from() method, add the following bold parameters:

   gsap.from('#logo', {duration:1, scale:0});
   

   The gsap.from() Method

   This method requires 2 parameters. The first is the target (the object being animated), which in our example is an element with an ID of logo. We use the same syntax used to target elements with CSS.

   The second parameter is a vars object { } defining properties of the animation, such as:

   • The duration of the animation (1 second in this example).
   • The start values for each property that is being tweened. In this example the scale property is being tweened from a value of 0 to the current value (which is how the element is styled before GSAP animates it).

   The vars object { } can contain multiple tweenable properties as well as special properties like eases, delays, and more (which we’ll cover later). Refer to greensock.com/docs/GSAP/gsap.from() for more details.

   gsap.from() specifies start values, while gsap.to() specifies end values.

3. Save the file.

4. Preview intro.html in a web browser.

5. Notice the logo takes one second to scale up to the normal size the logo would be if we didn’t animate it (the size dictated by HTML/CSS).

   To see the animation again, hit Cmd–R (Mac) or Ctrl–R (Windows) to reload the web browser.

6. Leave the page open in the browser, so you can reload it later.

Tweening Multiple Properties

You can put multiple properties in the curly braces to animate simultaneously. Let’s keep the scale and add a rotation.

1. Return to your code editor and add the following bold code. Be sure to add a comma to separate the properties!

   gsap.from('#logo', {duration:1, scale:0, rotation:45});
   

   NOTE: The order of the properties does not matter.

2. Save and reload the page in the browser.

   Over the course of one second, the logo tweens from a scale of zero as it rotates. It ends at normal rotation, because we’re animating from these values. Spiffy!

   NOTE: To rotate in the opposite direction, we could use a negative value of –45.

3. Return to your code editor.

4. Delete the rotation property so that the gsap.from() method looks like this:

   gsap.from('#logo', {duration:1, scale:0});
   

5. Let’s make the logo move up as it scales. For horizontal movement we animate x and for vertical we animate y. Type the bold code as shown below:

   gsap.from('#logo', {duration:1, scale:0, y:100});
   

6. Save and reload the page in the browser.

   The logo is moving up and scaling at the same time. Awesome!

Easing

An ease alters the rate of change (speed) during a tween, giving the movement a different feel. There are many different eases we can add to the tween.

1. To see the eases that are available in GSAP, open GreenSock’s Ease Visualizer tool at greensock.com/ease-visualizer

2. You will see the following interface. There is a list of eases on the right which allows you to preview its animation.

   

   NOTE: There’s also a video on the Ease Visualizer page with more explanation.

3. To the right of the visualizer:

   • Click none and watch the green ball move up at a constant speed (which feels a bit robotic).
   • Click none again if you need to rewatch it.
   • Click power4 and watch how the ball slows down when it approaches the top, as though it’s being slowed by gravity. This is more realistic movement.
4. Below the ease graph, click the Copy Ease button.

5. Keep this page open so you can come back to it, but return to your code editor.

6. At the end of the vars list, type a comma then ease: and paste so you end up with:

   gsap.from('#logo', {duration:1, scale:0, y:100, ease:"power4.out"});
   

7. Save and reload the page in the browser.

   The effect is subtle, but the speed of the animation is now faster at the beginning and it slows down as the approaches the final size and position, for a more natural feeling animation.

8. Switch back to the easing visualizer in your browser.

9. To the right of the visualizer, click on back.

   Eases can be applied to the beginning (in) or the end (out). Currently the type of ease is set to out.

   This back ease will go too far at the end, overshooting the target value and will have to come back to the final target value… which is why it’s called a back ease!

10. Below the ease graph:

    • In the code area we can change the options of the ease. Click the 1.7 and from the menu that appears choose 2.
    • Notice the graph changes, showing the ease is more exaggerated, going even farther past the final target value.
    • Click the Copy Ease button.

11. Return to your code editor.

12. At the end of the vars list replace the existing ease with the new one:

    gsap.from('#logo', {duration:1, scale:0, y:100, ease:"back.out(2)"});
    

13. Save and reload the page in the browser.

    As you can now see, the Back ease overshoots the end values before settling back into its final position. This gives a bouncy or bubbly feeling. Cool!

14. Try out 2 more eases:

    • Use the easing visualizer to copy the elastic ease code (then paste it into your file and preview). This will give you a springy bounce at the end.

    • Then try the bounce ease. This will feel like the logo is coming forward and hitting an invisible wall, which it bounces off of.