Basic Tweening: Free GreenSock Tutorial

Topics Covered in This GreenSock Tutorial:

Loading Scripts, Anatomy of a TweenLite Tween, the TweenLite.to() Method, Tweening Multiple Properties, Easing

Exercise Preview

Exercise Overview

In this hands-on exercise, you'll master the fundamentals of the GreenSock Animation Platform (GSAP) by integrating it into a real project and animating essential CSS properties. You'll discover why GSAP has become the gold standard for web animation—delivering smooth, performant animations with remarkably clean syntax.

TweenLite serves as the powerhouse core of GSAP's animation engine, capable of smoothly animating virtually any property of any object. Despite its lightweight footprint, it delivers professional-grade features that have made it the go-to choice for developers at companies like Google, Adobe, and Microsoft.

GSAP's modular architecture empowers you to load only the components you need, keeping your bundle size optimized—a critical consideration for modern web performance. Alternatively, you can leverage TweenMax for convenience, which packages the most commonly used components into a single file. We'll start with the targeted approach, loading only essential modules, then graduate to TweenMax as our animation requirements become more sophisticated.

Previewing the Finished Animation

Before diving into the code, let's examine the polished animation you'll be creating to understand our destination.

1. Launch Google Chrome (or your preferred modern browser).

2. Open a file using Cmd–O (Mac) or Ctrl–O (Windows).

3. Navigate to Desktop > Class Files > yourname-GSAP Class > Tweening Basics.

   NOTE: All exercise folders for this workbook are organized within the yourname-GSAP Class directory for easy access.

4. Double-click finished.html.

   Watch as the Noble Desktop icon elegantly rotates while sliding across the screen—this is the power of GSAP in action.

5. Refresh the page using Cmd–R (Mac) or F5 (Windows) to replay the animation. Study the smoothness and timing—qualities that separate professional animations from amateur attempts.

6. Close the browser when you're ready to begin building.

Loading Scripts

Professional GSAP implementation begins with understanding its modular system. For this exercise, we'll utilize three core components: TweenLite for animation logic, CSSPlugin for DOM manipulation, and EasePack for advanced motion curves.

1. Open start.html from the Tweening Basics folder using your preferred code editor (VS Code, Sublime Text, Dreamweaver, or similar).

   PRO TIP: Consider opening the entire Tweening Basics folder as a project in your editor for easier file navigation and IntelliSense support.

2. Examine the foundational HTML structure. Within the body tag around line 18, you'll find:

   <img id="icon" src="img/noble-icon.png" width="210" height="211">

3. Note the id="icon" attribute—this serves as our animation target selector. Proper element identification is crucial for maintainable GSAP code, especially in complex projects.

   Now we'll integrate the GSAP JavaScript modules. While production environments typically use CDN links for performance and caching benefits, we're using local files to ensure offline capability during development.

4. Locate the comment around line 20:

   <!—load scripts after DOM has been rendered—>

5. Add the essential GSAP modules below this comment:

   <!—load scripts after DOM has been rendered—>
   <script src="js/gsap/TweenLite.js"></script>
   <script src="js/gsap/plugins/CSSPlugin.js"></script>
   <script src="js/gsap/easing/EasePack.js"></script>

   This lightweight combination represents the foundation of most professional GSAP implementations:

   TweenLite provides GSAP's core animation engine with essential easing functions: Power0 through Power4, plus Linear, Quad, Cubic, Quart, Quint, and Strong. These cover 90% of animation needs while maintaining minimal overhead.

   CSSPlugin extends TweenLite's capabilities to handle CSS properties seamlessly. Beyond basic properties like width, height, and positioning, it excels at complex transforms (rotation, scaling, skewing, 3D transforms), color animations, opacity, and advanced CSS features—all with automatic vendor prefix handling.

   EasePack elevates your animations with sophisticated easing options including Elastic (spring-like motion), SlowMo (cinematic effects), Bounce (natural physics), SteppedEase (frame-by-frame animation), RoughEase (organic imperfection), plus mathematical curves like Sine, Circ, and Expo.

6. Save your file to commit these changes.

Anatomy of a TweenLite Tween

Understanding GSAP's syntax structure is essential for creating maintainable animations. Every tween requires three fundamental pieces of information that determine its behavior and appearance.

1. Every successful animation requires these core elements:

   • Target object: The DOM element, JavaScript object, or array of objects to animate
   • Duration: The animation timeline length (in seconds by default)
   • Properties: The CSS properties to animate and their final values

2. These elements feed into TweenLite's primary method (reference only—don't type this):

   TweenLite.to( target:Object, duration:Number, vars:Object )

   target:	The DOM element(s) or JavaScript object(s) to animate. Can be a single element, array, or selector string.
   duration:	Animation duration in seconds (default) or other units. Fractional values like 0.5 are perfectly valid.
   vars:	Configuration object containing CSS properties, special properties (ease, delay, onComplete), and advanced features.

   For comprehensive technical documentation, reference the official TweenLite.to() API at greensock.com/docs/TweenLite/static.to(). However, the step-by-step approach below will build your practical understanding organically.

Using the TweenLite.to() Method

Now we'll transform theory into practice by creating our first functional GSAP animation. This systematic approach ensures clean, readable code that scales effectively.

1. Establish a JavaScript reference to your target element. In the script section under the add your own script comment, add:

   <!—add your own script—>
   <script>
      var icon = document.getElementById("icon");
   </script>

   This creates a reusable reference to our image element. Professional tip: storing DOM references in variables improves performance by avoiding repeated DOM queries.

2. Create spacing for your animation code by pressing Return (Mac) or Enter (Windows) three times after your variable declaration.

3. Add the basic TweenLite method structure:

   var icon = document.getElementById("icon");
   
      TweenLite.to();
   
   </script>

4. Complete the tween with the required parameters:

   TweenLite.to(icon, 2, {opacity:0});

5. Let's deconstruct this animation call:

   • First parameter (icon): The target element to animate—our image with ID "icon"
   • Second parameter (2): The duration—2 seconds for a smooth, observable transition
   • Third parameter ({opacity:0}): The vars object defining the end state—completely transparent (opacity: 0)

   The vars object is GSAP's powerhouse, accepting unlimited CSS properties alongside special animation properties like callbacks, eases, delays, and timeline controls. This flexible architecture makes complex animations surprisingly manageable.

6. Save your progress using Cmd–S (Mac) or Ctrl–S (Windows).

7. Test your animation in a web browser.

   WORKFLOW TIP: Modern editors offer browser preview shortcuts for efficient development. In Sublime Text with SideBarEnhancements, use F12 (or fn–F12). In Dreamweaver, select File > Preview in Browser. Otherwise, manually open the file via your browser's file menu.

   Browser Preview Workflow

   Keep your HTML file open in the browser while coding. Simply reload with Cmd-R (Mac) or F5 (Windows) to see changes instantly without reopening files.

Tweening Multiple Properties

GSAP's true power emerges when animating multiple properties simultaneously. This creates sophisticated, layered animations that would require complex timing coordination in CSS or other frameworks.

The vars object accepts unlimited CSS properties, enabling rich multi-dimensional animations with a single method call. Let's enhance our fade animation with rotation for a more dynamic effect.

1. Return to your code editor and add rotation to the existing opacity tween:

   TweenLite.to(icon, 2, {opacity:0, rotation:360});

   IMPORTANT: Notice the comma separating properties—proper syntax is crucial for complex animations. Also observe GSAP's clean rotation syntax: no vendor prefixes, no complex transform strings, just rotation:360.

2. Save and preview your enhanced animation in the browser.

3. Marvel at the synchronized fade and rotation—two complex animations perfectly orchestrated in a single line of code. This demonstrates why professionals choose GSAP for production work.

   

4. Return to your editor for the next enhancement.

5. Simplify to focus on positioning by removing the opacity property:

   TweenLite.to(icon, 2, {rotation:360});

   This isolation technique helps when debugging complex animations—start simple, then layer complexity.

6. Add horizontal movement to recreate the finished animation's sliding effect:

   TweenLite.to(icon, 2, {rotation:360, left:400});

7. Save and test the animation.

   You'll notice the rotation works perfectly, but the horizontal movement fails. This reveals a critical CSS positioning requirement for GSAP animations.

8. Return to your code editor to resolve this issue.

9. For GSAP to animate positional properties (left, right, top, bottom), the target element must have CSS positioning context. Around line 12, enhance the #icon CSS rule:

   #icon {   
      position: relative;
   }

   This establishes the positioning context needed for left/right/top/bottom animations without disrupting the document flow.

10. Save and preview the complete animation. Now you'll see both smooth rotation and horizontal sliding—the foundation of professional motion design.

Easing

Easing transforms mechanical movement into natural, engaging motion by varying the rate of change throughout an animation. It's the difference between robotic transitions and animations that feel alive and purposeful.

GSAP provides an extensive easing library, from subtle mathematical curves to dramatic special effects. Understanding when and how to apply different eases is crucial for professional animation work.

1. Explore GSAP's comprehensive easing options using the interactive Ease Visualizer: greensock.com/ease-visualizer

   This invaluable tool helps you select the perfect ease by visualizing motion curves and providing copy-ready code.

2. The Ease Visualizer interface provides immediate visual feedback:

   

   The right panel categorizes eases by type (Power, Back, Bounce, etc.), while the graph shows the acceleration curve. This visual approach makes selecting appropriate eases intuitive rather than guesswork.

3. The generated code below the visualization updates dynamically based on your selections. Click any underlined text to fine-tune parameters and create custom variations.

   PRO TIP: The accompanying video tutorial on the Ease Visualizer page provides deeper insights into ease selection for different animation goals.

4. Let's implement a playful Bounce ease to add character to our animation.

5. Add the bounce effect after your positioning property:

   TweenLite.to(icon, 2, {rotation:360, left:400, ease:Bounce.easeOut});

   The Bounce.easeOut creates settling motion at the animation's conclusion—perfect for objects "landing" in their final position.

6. Save and preview the bouncing conclusion. This subtle detail transforms a basic movement into engaging motion.

7. Experiment with a different easing style. Replace Bounce with Back:

   TweenLite.to(icon, 2, {rotation:360, left:400, ease:Back.easeOut});

8. Save and observe the new motion pattern.

   The Back ease creates anticipation by overshooting the target before settling—a technique borrowed from traditional animation principles.

9. Page-load animations can feel abrupt and easily missed. Let's add strategic timing control.

10. Introduce a one-second delay to build anticipation:

    TweenLite.to(icon, 2, {rotation:360, left:400, ease:Back.easeOut, delay:1});

    This pause allows users to focus on the page content before the animation commands attention—a crucial UX consideration.

11. Save and test the complete animation with its refined timing. The delay creates a more polished, intentional user experience.

    Continue experimenting with different eases to understand their unique personalities and appropriate use cases.