TimelineLite Control

Topics Covered in This GreenSock Tutorial:

Master advanced timeline control techniques including play and pause functionality, reverse and restart capabilities, intelligent button behavior, dynamic speed adjustments with timescale controls, and sophisticated scrubbing interfaces using jQuery UI sliders.

Exercise Preview

Photo courtesy of istockphoto: Image #11068094

Exercise Overview

TimelineLite stands as one of the most powerful animation control systems available to modern web developers. Its ability to orchestrate thousands of individual animations while maintaining single-tween simplicity makes it indispensable for complex interactive projects. As demonstrated in our previous exercise, multiple tweens can be choreographed with surgical precision—sequenced with exact timing, spaced with deliberate gaps, or layered with sophisticated overlaps. The system's nested timeline architecture allows for virtually unlimited complexity.

This exercise elevates your timeline mastery by diving deep into advanced playback control, speed manipulation, and directional commands. You'll construct a comprehensive debugging interface for the INTO THE WIND animation, complete with full transport controls and real-time scrubbing capabilities. While production sites rarely expose such controls to end users, these developer tools prove invaluable during the creation, testing, and refinement phases of professional animation projects.

Previewing the Finished Animation

1. Launch Google Chrome to examine our target implementation.

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

   You'll recognize the core animation from our previous exercise, now enhanced with a comprehensive control panel featuring transport buttons and a precision slider interface.

3. Experiment with each control element—the button labels clearly indicate their functions—and utilize the slider for frame-accurate scrubbing through the animation sequence. Notice how the animation intelligently pauses when you stop manipulating the slider handle.

   This jQuery UI slider component transforms animation analysis from guesswork into precise investigation, allowing you to examine every transition, timing relationship, and visual effect with professional-grade control.

Examining the DOM Structure & JavaScript

Before implementing our control system, let's analyze the underlying architecture that makes this interface possible.

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

2. Examine the HTML structure on lines 13–22, focusing on the controller div containing our interface elements:

   <div id="controller">
      <button id="play">play()</button>
      <button id="pause">pause()</button>
      <button id="reverse">reverse()</button>
      <button id="resume">resume()</button>
      <button id="restart">restart()</button>
      <button id="fastSpeed">timeScale(4)</button>
      <button id="normalSpeed">timeScale(1)</button>
      <div id="slider"></div>
   </div>

   This semantic HTML structure prioritizes clarity and maintainability. Each button's unique ID enables targeted event handling, while the descriptive labels mirror their corresponding TimelineLite methods. The empty slider div serves as a mounting point for our jQuery UI component, which we'll populate dynamically.

Adding Functionality to the Play & Pause Buttons

TimelineLite provides a comprehensive suite of control methods designed specifically for professional animation debugging and control: play(), pause(), reverse(), resume(), restart(), and timeScale(). These methods form the foundation of any serious animation control interface. Our DOM structure mirrors this API design, creating an intuitive connection between interface and functionality.

1. Add the following jQuery event handler around line 71 of start.html:

   $("#play").click(function(){
   
   });

   This jQuery selector targets our play button using its unique ID. The click() method represents modern event handling best practices, providing reliable cross-browser compatibility and clean separation of concerns between markup and behavior.

2. Complete the play button implementation by adding the TimelineLite method call:

   $("#play").click(function(){
      tl.play();
   });

   The tl variable references our TimelineLite instance from the previous exercise. This simple method call demonstrates the elegant simplicity of GreenSock's API design—complex animations controlled with single-line commands.

3. Create the pause button by copying and pasting the play button code:

   $("#play").click(function(){
      tl.play();
   });
   
   $("#play").click(function(){
      tl.play();
   });

4. Modify the duplicated code to target the pause button and method:

   $("#play").click(function(){
      tl.play();
   });
   
   $("#pause").click(function(){
      tl.pause();
   });

5. Test your implementation by saving the file and previewing start.html in Chrome. The play and pause controls should provide immediate, responsive control over timeline playback.

   NOTE: If the timeline completes before you can test the pause function, simply reload the page. The current play() implementation doesn't automatically restart completed timelines—we'll address this limitation with intelligent button logic shortly.

6. Return to your code editor to continue building the control interface.

Adding Reverse, Resume, & Restart Buttons

Professional animation interfaces require comprehensive directional control. The reverse(), resume(), and restart() methods provide this functionality with nuanced behavioral differences that prove crucial during development and debugging phases.

1. Duplicate the pause button code twice to create templates for our additional controls.

2. Implement the reverse and resume functionality with the following modifications:

   $("#pause").click(function(){
      tl.pause();
   });
   
   $("#reverse").click(function(){
      tl.reverse();
   });
   
   $("#resume").click(function(){
      tl.resume();
   });

3. Save and test your additions in the browser. Pay particular attention to the behavioral differences: after triggering reverse() and then pausing, the resume() button maintains the backward playback direction, while play() always enforces forward playback. This directional memory makes resume() particularly valuable for complex debugging scenarios.

4. Continue experimenting with all four buttons until their distinct behaviors become intuitive. This hands-on experience builds the muscle memory essential for efficient animation debugging.

5. Add the restart functionality by duplicating the resume code and making these changes:

   $("#restart").click(function(){
      tl.restart();
   });

   The restart() method provides absolute reset functionality, returning the timeline to time position 0 and initiating forward playback regardless of previous state.

6. Test the restart button to confirm it consistently returns the animation to its initial state.

7. Allow the animation to play to completion, then test the play() button. You'll notice it fails to restart the completed timeline—a common usability issue that we'll resolve with conditional logic.

Making an Intelligent Play Button

Professional interfaces anticipate user expectations and behave intelligently based on context. TimelineLite's progress system provides the foundation for this smart behavior through its normalized 0-to-1 scale, where 0 represents the timeline start, 0.5 marks the midpoint, and 1 indicates completion.

The progress() method operates in dual modes for maximum flexibility:

tl.progress() retrieves current progress as a value between 0-1
tl.progress(0.5) sets playhead position to timeline midpoint

We'll leverage this progress tracking to create a play button that intelligently restarts completed timelines while preserving standard playback behavior for active animations.

1. Return to your code editor and enhance the play button with conditional logic:

   $("#play").click(function(){
      if(tl.progress() < 1){ 
         tl.play();
      }
   });

   This conditional statement checks whether the timeline has reached completion before executing the play command, establishing the foundation for context-aware behavior.

2. Complete the intelligent behavior by adding the alternative action:

   $("#play").click(function(){
      if(tl.progress() < 1){
         tl.play();
      } else {
         tl.restart();
      }
   });

   This else clause transforms our basic play button into a sophisticated interface element that adapts its behavior based on timeline state—a hallmark of professional user experience design.

3. Test the enhanced functionality by allowing the animation to complete, then clicking the play() button. The timeline should restart automatically. Verify that mid-timeline pause-and-play behavior remains unchanged, ensuring we haven't broken existing functionality while adding new capabilities.

Adding Timescale Buttons

Timeline speed control proves invaluable during both development and presentation phases. TimelineLite's timeScale() method provides this functionality with the same precision and flexibility found in TweenLite. Values below 1.0 create slow-motion effects perfect for analyzing complex transitions, while values above 1.0 accelerate playback for rapid iteration testing.

This global speed control eliminates the need to manually adjust individual tween durations—imagine modifying timing across hundreds of animations with a single method call.

1. Add the fast-speed control beneath your restart button code:

   $("#fastSpeed").click(function(){
      tl.timeScale(4);
   });

   This implementation creates 4x speed playback—fast enough to quickly review long animation sequences while remaining controllable for analysis purposes.

2. Create the normal speed reset by duplicating and modifying the fast-speed code:

   $("#fastSpeed").click(function(){
      tl.timeScale(4);
   });
   
   $("#normalSpeed").click(function(){
      tl.timeScale(1);
   });

3. Test both speed controls, noting how the accelerated playback persists until explicitly reset. This persistent behavior allows for extended analysis sessions at modified speeds without requiring repeated button clicks.

   Consider the professional applications: client reviews benefit from accelerated previews, while detailed debugging sessions often require slow-motion analysis. The timeScale() method handles both scenarios effortlessly, making it an essential tool for any serious animation developer.

Adding a jQuery UI Slider

Precision timeline control demands more than simple transport buttons. A scrubbing interface provides frame-accurate positioning essential for detailed animation analysis, timing refinement, and effect troubleshooting. jQuery UI's slider component offers this precision with battle-tested reliability across all modern browsers.

jQuery UI has evolved significantly since its initial release, now providing a comprehensive ecosystem of interface components used by millions of professional websites. While newer frameworks have emerged, jQuery UI's slider remains the gold standard for HTML5-based scrubbing interfaces due to its reliability, accessibility features, and extensive customization options.

The implementation files reside in the TimelineLite Control > js > jqueryUI folder, including both the visual theme CSS and the core JavaScript functionality. This local installation approach ensures consistent behavior regardless of CDN availability—a crucial consideration for professional development workflows.

1. Locate the jQuery UI CSS link on line 7 of start.html:

   <link rel="stylesheet" href="js/jqueryui/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">

2. Find the corresponding JavaScript include around line 41:

   <script src="js/jqueryUI/js/jquery-ui-1.10.3.custom.min.js"></script>

   These dependencies provide everything needed for professional-grade slider implementation without external dependencies or version conflicts.

3. Initialize the slider component around line 103:

   $("#slider").slider();

   This single line demonstrates jQuery UI's power—transforming our empty div into a fully functional interface component with default styling and behavior.

4. Save and preview the page to see the slider in action. While visually complete and interactive, it requires configuration to control our timeline effectively.

Configuring the jQuery UI Slider

Professional slider implementation requires careful configuration to match the precision demands of animation control. The configuration object approach provides granular control over behavior, range, and responsiveness.

For comprehensive slider documentation and advanced configuration options, reference the official jQuery UI documentation at api.jqueryui.com/slider

1. Replace the basic slider initialization with a configured version:

   $("#slider").slider({
      min: 0, 
      max: 100, 
      step: 10, 
      slide: function ( event, ui ) {
         console.log("value = " + ui.value);
      }
   });

2. Test the configured slider in Chrome, noting the discrete stepped movement caused by the step: 10 setting. This creates only ten possible positions across the full range—insufficient for smooth animation control.

   NOTE: The timeline control isn't active yet; we're optimizing slider behavior before integration.

3. Open Chrome DevTools with Cmd–Opt–J (Mac) or CTRL–Shift–J (Windows) to monitor the console output as you manipulate the slider.

4. Observe how the console displays only multiples of ten due to our step configuration. Professional animation control demands much finer granularity.

5. Increase slider precision by modifying the step value:

   $("#slider").slider({
      min: 0, 
      max: 100, 
      step: 0.1, 
      slide: function ( event, ui ) {
         console.log("value = " + ui.value);
      }
   });

6. Test the improved precision—the slider should now move smoothly with hundreds of possible positions, as confirmed by the console output showing decimal values.

7. Align the slider range with TimelineLite's progress system by adjusting to the 0-1 scale:

   $("#slider").slider({
      min: 0, 
      max: 1, 
      step: 0.001, 
      slide: function ( event, ui ) {
         console.log("value = " + ui.value);
      }
   });

8. Verify that console output now shows values between 0 and 1, perfectly matching the progress() method's expected range. This alignment enables direct value mapping without mathematical conversion.

9. Connect the slider to timeline control by adding the progress method call:

   $("#slider").slider({
      min: 0, 
      max: 1, 
      step: 0.001, 
      slide: function ( event, ui ) {
         console.log("value = " + ui.value);
         tl.progress(ui.value);
      }
   });

   This single line creates the magic connection between slider position and timeline progress, enabling real-time scrubbing control.

10. Test the integrated functionality—dragging the slider should now provide direct timeline control with frame-accurate precision. However, releasing the slider allows the timeline to continue playing, which may not match user expectations.

11. Add automatic pause functionality to create more intuitive behavior:

    slide: function ( event, ui ) {
       console.log("value = " + ui.value);
       tl.pause();
       tl.progress(ui.value);
    }

12. Test the enhanced behavior—the timeline should now pause when you begin slider manipulation, providing full user control over playback state.

13. Notice that clicking the play button doesn't update the slider position to reflect timeline progress—a disconnection we'll resolve with event callbacks in the next phase of development.