TweenMax: Free GreenSock Tutorial

Topics Covered in This GreenSock Tutorial:

Introduction to TweenMax, Advanced Repeat Controls (Repeat, RepeatDelay, & Yoyo), Callback Functions: OnStart, OnRepeat, & OnComplete

Exercise Preview

Images courtesy of istockphoto: AtomA, Image #20846177; Jamie Farrant (enjoynz), Image #11822906

Exercise Overview

Having explored TweenLite's foundational capabilities, you're now ready to harness the full power of TweenMax. While TweenLite serves as GSAP's lightweight core, TweenMax extends it dramatically with advanced features, enhanced methods, and sophisticated callback systems that enable complex animation sequences.

TweenMax's standout feature is its comprehensive repeat system—the ability to loop animations a specific number of times or infinitely, complete with customizable delays between iterations. These repeating animations unlock powerful callback opportunities, particularly the onRepeat handler, which allows for dynamic content updates throughout the animation cycle. This exercise demonstrates these capabilities through a practical, engaging example that showcases real-world animation patterns you'll use in professional projects.

Previewing the Finished Animation

1. Launch Google Chrome to preview our target animation.

2. Press Cmd–O (Mac) or Ctrl–O (Windows), navigate to Desktop > Class Files > yourname-GSAP Class > TweenMax, and open finished.html.

3. Initially, you'll see only the background landscape. After a deliberate delay, a GO! message appears, followed by a tan station wagon that smoothly "drives" across the screen from left to right until it exits the viewport—exactly as shown in the exercise preview above.

4. The animation continues with a parade of different vehicles moving at consistent intervals across the screen. Notice how the message dynamically updates to display the current repeat count, as demonstrated in the screenshot below. This real-time feedback illustrates the power of TweenMax's callback system.

   

   Images courtesy of istockphoto: AtomA, Image #20846177; Jamie Farrant (enjoynz), Image #11822906

5. When the animation sequence completes, a final The End message appears. Refresh the page multiple times to fully appreciate the smooth timing and professional polish of the complete animation sequence.

Examining the DOM Structure & JavaScript Foundation

Before diving into the animation code, let's understand the underlying structure that makes this example work.

1. Open start.html from the TweenMax folder in your preferred code editor.

2. Examine the streamlined DOM structure on lines 45–48:

   <div id="demo">
      <div id="message"><em>GO!</em></div>
      <div id="car"></div>
   </div>

   This minimal markup demonstrates efficient animation design. The demo container provides our animation stage, while the message element handles dynamic text updates throughout the animation lifecycle. The car element will serve as our moving sprite container, utilizing CSS background positioning to create the illusion of multiple vehicles.

3. Review the JavaScript variables (lines 58–61) that control our animation logic:

   $(document).ready(function() {
   
      var $car = $("#car"), 
          $message = $("#message"), 
          count = 0, 
          tween;

   These variables create our animation control system: $message enables dynamic text updates via callback functions, count tracks animation iterations for display purposes, and tween will hold our primary TweenMax animation instance targeting the $car element.

4. Preview start.html in your browser. You'll notice all cars appear as a vertical strip positioned to the left of the landscape—this is intentional and demonstrates the sprite-based approach we'll implement.

5. Ctrl–click (Mac) or Right–click (Windows) on the car strip and select Inspect Element. In the DevTools, observe how the car strip is implemented as a background image within the car div—a technique that allows us to efficiently animate through multiple car designs without loading separate image files.

   

TweenMax Exclusive Features: Repeat, RepeatDelay, & Yoyo

Now we'll implement the core TweenMax functionality that sets it apart from TweenLite. Our approach uses CSS sprite animation—each time the tween repeats, we'll shift the car strip's vertical position to reveal the next vehicle, creating a seamless parade effect.

1. Return to your code editor to begin implementing TweenMax.

2. Locate the load scripts comment (around line 52) and add TweenMax:

   <!—load scripts after dom has been rendered—>
   <script src="js/gsap/TweenMax.js"></script>
   <script src="js/jquery/jquery-1.10.1.min.js"></script>

   Notice the streamlined approach: TweenMax includes TweenLite, CSSPlugin, and EasePack automatically. This all-in-one loading strategy reduces HTTP requests and simplifies dependency management in production environments.

Mastering Callbacks: OnStart, OnRepeat, & OnComplete

Callbacks transform static animations into dynamic, responsive experiences. We'll implement a complete callback system that manages UI state throughout the animation lifecycle.

1. First, hide the initial message to prevent premature display. Locate the #message CSS rule (around line 18) and add visibility control:

   border: solid 4px #A2D0F3;
      visibility: hidden;
   }

2. Verify the hidden state in your browser—the GO! message should no longer appear immediately.

3. Implement the onStart callback to reveal the message at the perfect moment:

   tween = TweenMax.to($car, 1, {x:1250, ease:Linear.easeNone, delay:1, repeat:4, repeatDelay:0.5, onStart:startHandler});

   The onStart callback—available in both TweenLite and TweenMax—provides precise control over when UI elements appear.

4. Define the startHandler function below your tween definition:

   tween = TweenMax.to($car, 1, {x:1250, ease:Linear.easeNone, delay:1, repeat:4, repeatDelay:0.5, onStart:startHandler});
   
   function startHandler() {
      TweenLite.set($message, {visibility:"visible"});
   }

   Using TweenLite.set() for instantaneous property changes maintains consistency with GSAP's API while ensuring reliable cross-browser visibility control.

5. Test the synchronized message appearance—the GO! text should now appear precisely when the cars begin moving.

6. Add TweenMax's exclusive onRepeat callback for dynamic content updates:

   tween = TweenMax.to($car, 1, {x:1250, ease:Linear.easeNone, delay:1, repeat:4, repeatDelay:0.5, onStart:startHandler, onRepeat:repeatHandler});

   The onRepeat callback unlocks powerful possibilities—updating counters, changing colors, modifying content, or triggering complementary animations at each repeat cycle.

7. Create the repeatHandler function with dynamic content management:

   function startHandler() {
      TweenLite.set($message, {visibility:"visible"});
   }
   function repeatHandler() {
      count++;
      $message.text("repeat: " + count);
   }

   This handler demonstrates real-time state management: count++ increments our tracking variable, while $message.text() provides immediate visual feedback to users about the animation progress.

8. Test the dynamic counter functionality in your browser. The message should update with each repeat cycle, creating an engaging, informative user experience.

9. Now implement the sprite animation technique that reveals different cars:

   function repeatHandler() {
      count++;
      $message.text("repeat: " + count);
      TweenLite.set($car, {backgroundPosition:"0px -=160px"});
   }

   The backgroundPosition adjustment uses relative values (note the -= operator) to shift the background image 160 pixels upward, revealing the next car in our sprite. This technique efficiently creates the illusion of different vehicles without loading multiple image files.

10. Preview the multi-car effect—each repeat cycle should now display a different vehicle while updating the counter.

11. Complete the callback system with onComplete for proper closure:

    tween = TweenMax.to($car, 1, {x:1250, ease:Linear.easeNone, delay:1, repeat:4, repeatDelay:0.5, onStart:startHandler, onRepeat:repeatHandler, onComplete:completeHandler});

12. Define the completion handler for professional animation closure:

    function completeHandler() {
       $message.text("The End");
    }

13. Test the complete animation sequence. The final "The End" message provides clear closure and prevents user confusion about animation state.

Professional Polish: Cleaning Up the Visual Presentation

With our animation logic complete, let's apply the finishing touches that distinguish professional work from amateur attempts.

1. Return to your code editor for the final refinement.

2. Locate the #demo CSS rule (around line 9) and add overflow control:

   #demo{
      position: relative;
      width: 788px;
      height: 340px;
      margin: 50px auto 0 auto;
      padding-top: 10px;
      background: url(img/landscape.jpg); 
      overflow: hidden;
   }

   The overflow: hidden property creates clean visual boundaries, hiding the car sprite strip and ensuring users see only the intended single vehicle at any moment.

3. Preview the final result. You should now see a polished, professional animation with seamless car transitions, dynamic messaging, and clean visual presentation.

This exercise demonstrates TweenMax's advanced capabilities in real-world scenarios. The combination of precise repeat controls, dynamic callbacks, and sprite-based animation creates engaging user experiences while maintaining efficient performance. For comprehensive TweenMax documentation and advanced techniques, visit: greensock.com/tweenmax