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 master the fundamentals of web animation using the GreenSock Animation Platform (GSAP), the industry-standard JavaScript library trusted by major studios and Fortune 500 companies worldwide. GSAP consistently outperforms native CSS animations and other libraries in both speed and cross-browser compatibility, making it the professional choice for high-quality web animations. By the end of this tutorial, you'll understand why GSAP has become the go-to solution for developers who demand smooth, reliable animations that work flawlessly across all devices and browsers.

Previewing the Finished Animation

Let's start by examining the final result you'll be creating, then work backwards to understand how it's built.

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 with a sophisticated entrance animation—scaling in smoothly while moving upward with a subtle bounce. This polished effect demonstrates GSAP's power to create professional-grade animations with minimal code.

   • To replay the animation, press Cmd–R (Mac) or Ctrl–R (Windows) to reload the browser. Watch it several times to notice the subtle easing that makes the motion feel natural and engaging rather than mechanical.

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 the file you'll be coding in.

7. Preview intro.html in a browser.

   Currently, it displays a static logo—the starting point for our animation journey.

8. Back in your code editor, let's examine the HTML structure. Look in the body tag and you'll see:

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

9. Note the ID attribute logo. This identifier serves as our animation target—GSAP will use this to locate and manipulate the element. Proper element targeting is fundamental to effective animation workflows.

Loading the GSAP JavaScripts

GSAP's modular architecture is one of its greatest strengths. The core library contains all the essential animation functionality while maintaining a lean file size of just 47KB minified and gzipped. This design philosophy allows you to add only the features you need, keeping your projects optimized for performance.

The GSAP ecosystem includes specialized plugins for advanced animations—some free, others available to Club GreenSock members—but the core library handles 90% of professional animation requirements. You can explore the complete feature set and documentation at greensock.com/docs, which remains one of the most comprehensive and well-maintained documentation resources in the JavaScript community.

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 CDN links offer convenience and potential caching benefits, we're using a local copy for this exercise. This approach ensures reliability regardless of internet connectivity and gives you complete control over your dependencies—a best practice for production environments where consistency is paramount.

2. Add an empty script tag below that, which is where we'll write our custom animation code:

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

Now we're ready to dive into GSAP's animation methods and discover why it's become the professional standard.

Using the Gsap.from() Method

GSAP's from() method is intuitive and powerful—it defines where an animation should start from, letting the element animate to its natural state. This approach often feels more logical than specifying end points, especially for entrance animations.

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});

   GSAP Animation Methods

   Feature	gsap.from()	gsap.to()
   Purpose	Specifies start values	Specifies end values
   Animation Direction	From specified to current state	From current to specified state
   Use Case	Entrance animations	Exit animations

   Recommended: Use gsap.from() for entrance effects like the logo scaling up from zero

Tweening Multiple Properties

One of GSAP's most powerful features is its ability to animate multiple properties simultaneously with perfect synchronization. This creates complex, polished effects with remarkably simple code—a capability that sets GSAP apart from basic CSS transitions.

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: Property order within the object doesn't affect the animation—GSAP optimizes the execution internally for maximum performance.

2. Save and reload the page in the browser.

   Now the logo performs a sophisticated combination: scaling from zero while rotating from 45 degrees to its natural position. This demonstrates how GSAP handles complex transformations that would require extensive CSS keyframe animations or multiple JavaScript timers with other approaches.

   TIP: Use negative rotation values (like –45) to spin in the opposite direction, opening up even more creative possibilities.

3. Return to your code editor.

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

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

5. Let's add vertical movement to create a more dynamic entrance. For positioning, GSAP uses x for horizontal and y for vertical movement. Add the bold code as shown:

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

6. Save and reload the page in the browser.

   The logo now combines scaling and upward movement in perfect harmony—a classic entrance animation that feels both professional and engaging. This type of combined transformation is what makes interfaces feel polished and intentional.

With multiple properties animating in sync, we're ready to explore the final piece that transforms good animations into great ones: easing.

Easing

Easing is what separates amateur animations from professional ones. It controls the rate of change throughout an animation, mimicking the physics of real-world motion. Without easing, animations feel robotic and lifeless—with proper easing, they become engaging and natural. GSAP includes an extensive library of easing functions, from subtle to dramatic, ensuring you can match any design vision.

1. To explore GSAP's easing options, open GreenSock's interactive Ease Visualizer at greensock.com/ease-visualizer

2. You'll see an intuitive interface with a visualization area and a comprehensive list of available eases on the right:

   

   This tool is invaluable for understanding how different eases affect motion timing. Many professional animators bookmark this page for quick reference during projects.

3. In the ease list on the right:

   • Click none and observe the green ball's constant-speed movement—this linear motion feels mechanical and unnatural.
   • Click none again if you need to replay the animation.
   • Click power4 and notice how the ball starts fast then gradually slows down, like a ball being affected by air resistance or gravity. This acceleration curve mirrors real-world physics and feels much more natural.
4. Below the visualization, click the Copy Ease button to grab the code snippet.

5. Keep the visualizer open for reference, but return to your code editor.

6. At the end of your vars object, add a comma then ease: and paste the copied code:

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

7. Save and reload the page in the browser.

   The change is subtle but significant—the animation now has a more refined, professional feel as it decelerates toward the end. This natural motion curve is what your eye expects to see, making the animation feel smooth and polished rather than computer-generated.

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

9. Click on back in the ease list.

   The "back" ease family creates overshoot effects—the animation goes past its target value before settling back to the final position. The current setting shows out, meaning the overshoot happens at the animation's end. This creates a playful, bouncy feeling that's perfect for attention-grabbing interface elements.

10. Below the visualization graph:

    • In the configuration area, click 1.7 and select 2 from the dropdown menu.
    • Notice how the graph curve becomes more pronounced, showing a more exaggerated overshoot effect.
    • Click Copy Ease to grab this enhanced version.

11. Return to your code editor.

12. Replace the existing ease with the new back ease:

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

13. Save and reload the page in the browser.

    The logo now has a delightful bounce as it settles into position—going slightly past its final size and position before bouncing back. This type of ease adds personality to your animations and is particularly effective for call-to-action buttons, notifications, and brand elements that need to capture attention.

14. Experiment with two more dramatic eases to understand the full range of possibilities:

    • Use the visualizer to copy the elastic ease code and test it in your animation. This creates a spring-like oscillation that's perfect for playful, energetic interfaces.

    • Try the bounce ease, which simulates the logo hitting an invisible surface and bouncing several times before settling. This effect works exceptionally well for gamified interfaces or child-friendly applications.