Rocket Launch: TextPlugin

Topics Covered in This GreenSock Tutorial:

Enabling & Testing TextPlugin, Coding the Ready-Set-GO Countdown, Creating a Dramatic Animation for "GO!"

Exercise Preview

Image courtesy of istockphoto: visual go, Image #22009478

Exercise Overview

GSAP's reputation as the industry's gold standard for web animation stems largely from its precise timing control. The platform ensures tweens execute in perfect sequence while giving animators granular control over the nuanced pacing that separates amateur work from professional animation.

Few real-world scenarios demand more precise timing than a rocket launch, where people, computers, and mechanical systems must synchronize flawlessly to achieve mission success. Over the next two exercises, we'll code a complete rocket launch sequence that demonstrates these timing principles in action. This first exercise reinforces core timing concepts while introducing GSAP's TextPlugin—a powerful tool that manages discrete text sections without requiring multiple DOM elements or individual tweens for each text fragment.

TextPlugin eliminates the complexity of managing multiple text elements, streamlining your workflow while maintaining the precise control professional animation demands.

Previewing the Finished Animation

1. To examine the animation we'll be building, launch Google Chrome (or your preferred modern browser).

2. Hit Cmd–O (Mac) or CTRL–O (Windows), navigate to Desktop > Class Files > yourname-GSAP Class > Rocket Launch Done, and double–click on index.html.

3. Study the animation sequence and its layered elements: during the Ready, Set, GO! countdown, the rocket trembles with anticipation while animated flames propel it through the starfield backdrop.

4. While the finished animation appears elegant in its simplicity, it orchestrates numerous elements with complex timing relationships. Watch the sequence several times to absorb the choreography—this attention to timing detail separates professional animation from amateur attempts.

Examining the DOM Structure & JavaScript

Now we'll dive into the technical implementation, focusing specifically on coding the text countdown sequence that drives our animation's narrative.

1. In your code editor, open yourname-GSAP Class > Rocket Launch TextPlugin > start.html (or the entire Rocket Launch TextPlugin folder if your editor supports project-level management).

2. Preview start.html in your browser to establish the baseline.

   The current page displays several static elements: the Ready text, the rocket graphic, the starfield background, and four flame states that we'll later animate using the background-position property for smooth sprite animation.

3. Return to your code editor and examine the HTML structure on lines 56–62:

   <div id="demo">
      <div id="rocket">
         <div id="flames"></div>
         <div id="rocketImage"></div>      
      </div>
      <div id="countDown">Ready</div>
   </div>

   Notice how the rocket div encapsulates both flames and rocketImage as separate divs—this separation enables independent animation control for each component. The countDown div currently contains only Ready but will dynamically change throughout our sequence. The parent demo div provides the starfield background context.

4. Examine the jQuery variables and timeline initialization on lines 72–76. These variables create clean references to our key DOM elements:

   var $demo = $("#demo"), 
       $flames = $("#flames"), 
       $rocket = $("#rocket"), 
       $countDown = $("#countDown"), 
       tl = new TimelineLite();

   This organization pattern keeps your animation code readable and maintainable—essential practices for professional development workflows.

Enabling & Testing TextPlugin

With our project structure understood, let's implement GSAP's TextPlugin, which provides sophisticated control over text value tweening within DOM elements. Unlike basic innerHTML manipulation, TextPlugin offers smooth character-by-character transitions that create engaging typewriter and morphing effects.

1. TextPlugin exists as a separate module from the core TweenMax library, reflecting GSAP's modular architecture that keeps file sizes optimized. Load the plugin by adding this script reference on line 66:

   <script src="js/gsap/TweenMax.js"></script>
   <script src="js/gsap/plugins/TextPlugin.js"></script>
   <script src="js/jquery/jquery-1.10.1.min.js"></script>

   NOTE: GSAP's plugin architecture ensures loading order doesn't affect functionality—the scripts self-register when the core library is present.

2. Add this test code beneath the jQuery variable declarations:

   tl = new TimelineLite();
   
   TweenLite.to($countDown, 1, {text: "hello", delay:0.5})

   This tween transforms the $countDown element's content from Ready to hello over 1 second with a 0.5-second delay. The text property triggers TextPlugin's character-by-character morphing algorithm.

3. Save the file and preview the page. Notice how letters transition individually from Ready to hello—this smooth morphing effect would require complex DOM manipulation without TextPlugin.

4. Return to your editor and modify the duration parameter:

   TweenLite.to($countDown, 0.5, {text: "hello", delay:0.5})

5. Save and preview again. The shorter duration creates a snappier transition, demonstrating how timing adjustments dramatically affect user perception and engagement.

6. Extend the text to test longer content:

   TweenLite.to($countDown, 0.5, {text: "hello, class", delay:0.5})

7. Save and preview. The expanded text showcases TextPlugin's ability to handle varying content lengths while maintaining smooth animation timing—perfect for dynamic content scenarios.

Coding the Ready-Set-GO Countdown

TextPlugin's key advantage lies in reusing single DOM elements for multiple text states, eliminating the need for complex HTML structures or JavaScript DOM manipulation. Our countdown sequence will transform one element through three distinct states using timeline-based coordination.

1. Remove the experimental code to establish a clean baseline:

   TweenLite.to($countDown, 0.5, {text: "hello, class", delay:0.5})

2. Replace it with this timeline-based approach:

   tl.from($countDown, 1, {scale:0, opacity:0})

   The existing Ready text animates from zero scale and opacity, creating a smooth appearance effect that establishes visual hierarchy and draws user attention.

3. Save and preview to confirm the effect works as expected.

4. Chain the next animation state using GSAP's fluent interface:

   tl.from($countDown, 1, {scale:0, opacity:0})
     .set($countDown, {text:"Set"})

   NOTE: set() methods execute instantaneously (zero duration), making them ideal for immediate property changes that need precise timing within larger sequences.

5. Save and preview. The text transitions immediately from Ready to Set, demonstrating how TextPlugin eliminates the need for separate DOM elements while maintaining clean, readable code.

6. Add the entrance animation for "Set":

   tl.from($countDown, 1, {scale:0, opacity:0}).set($countDown, {text:"Set"})
     .from($countDown, 1, {scale:0, opacity:0})

   This creates consistent visual treatment where Set appears with the same dramatic entrance as Ready.

7. Save and preview—you'll notice Set never appears! This introduces us to a crucial GSAP concept that trips up many developers.

   The issue stems from GSAP's immediateRender property, automatically set to true for all from() tweens. In most scenarios, this behavior is beneficial. Consider this example:

   TweenLite.from(element, 1, {opacity:0, delay:1});

   Without immediateRender:true, the element would remain fully visible during the delay, then abruptly disappear before fading in—creating jarring user experiences. The automatic setting prevents this by immediately applying starting values.

   However, when multiple from() tweens target the same element, immediateRender creates conflicts. Our first tween sets countDown opacity to 0, and the second tween records this as its starting value, creating a tween from 0 to 0—effectively invisible.

   Professional developers handle this by explicitly controlling immediateRender behavior where needed.

8. Fix the conflict by disabling automatic rendering:

   tl.from($countDown, 1, {scale:0, opacity:0}).set($countDown, {text:"Set"}).from($countDown, 1, {scale:0, opacity:0, immediateRender:false})

9. Save and preview—the sequence now works perfectly, demonstrating professional-level problem-solving in animation development.

10. Complete the countdown by adding the final state:

    tl.from($countDown, 1, {scale:0, opacity:0}).set($countDown, {text:"Set"}).from($countDown, 1, {scale:0, opacity:0, immediateRender:false})
      .set($countDown, {text:"GO!"})

11. Save and preview. The complete countdown sequence demonstrates how professional animations layer multiple techniques to create engaging user experiences. Now let's add dramatic emphasis to our climactic moment.

Creating a Dramatic Animation for "GO!"

Professional animation leverages visual hierarchy and emphasis to guide user attention and create emotional impact. Our "GO!" moment represents the sequence climax and deserves special treatment that communicates urgency and excitement.

1. Prepare the dramatic entrance by setting the initial state:

   tl.from($countDown, 1, {scale:0, opacity:0}).set($countDown, {text:"Set"}).from($countDown, 1, {scale:0, opacity:0, immediateRender:false}).set($countDown, {text:"GO!", scale:0})

   Setting scale:0 makes GO! invisible at the moment it appears, establishing the foundation for our dramatic entrance effect.

2. Save and preview to confirm invisibility—this validates our setup for the climactic animation.

3. Create the explosive entrance effect:

   tl.from($countDown, 1, {scale:0, opacity:0}).set($countDown, {text:"Set"}).from($countDown, 1, {scale:0, opacity:0, immediateRender:false}).set($countDown, {text:"GO!", scale:0})
     .to($countDown, 0.5, {scale:2, opacity:0})

   This tween scales GO! to 200% while fading to transparency, creating a dramatic burst effect that signals the launch moment. The 0.5-second duration provides punchy timing that matches the urgency of a rocket launch.

4. Save and preview the complete sequence. The countdown now delivers professional-level visual impact, with each element carefully timed to build tension and release. This foundation prepares us perfectly for the next exercise, where we'll animate the rocket's flame effects and launch trajectory through the starfield.