TimelineMax: Burger Boy Banner

Topics Covered in This GreenSock Tutorial:

Creating the TimelineMax & Animating the First Panel, Animating the Second Panel, Animating the Third Panel, Integrating TimelineMax's Repeat & RepeatDelay

Exercise Preview

Photo courtesy of istockphoto: Paul Johnson Photography, Image #5739487

Exercise Overview

In this comprehensive exercise, you'll construct a sophisticated banner animation that demonstrates professional animation workflow principles. When developing complex, multi-panel animations, seasoned developers always begin with a detailed storyboard that maps out key moments in the sequence. This strategic approach involves coding the HTML and CSS for these critical moments before creating a single tween—a methodology that prevents costly revisions and ensures smoother production cycles.

While this exercise involves substantial coding, we'll emphasize industry best practices and proven workflows that separate professional animators from hobbyists. Our primary focus centers on structuring your files and code architecture for maximum maintainability and collaboration. This foundation becomes invaluable when working on larger projects or within development teams.

Previewing the Finished Animation

1. To examine the animation we'll be constructing, launch Google Chrome (or your preferred modern browser with strong CSS animation support).

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

3. Watch the animation multiple times to analyze the pacing, timing, and interaction patterns between various elements. While the eight-second animation might appear complex initially, it's strategically structured around three distinct panels that create a cohesive narrative flow:

   

   Photo courtesy of istockphoto: Paul Johnson Photography, Image #5739487

   By breaking down this sophisticated animation into three manageable components, we'll streamline the development process and create more maintainable code. This modular approach is essential for professional animation work where revisions and iterations are common. Let's dive into the implementation!

Examining the DOM Structure & JavaScript Architecture

1. Open your preferred code editor and load index.html from the Burger Boy Banner folder.

   NOTE: If your editor supports folder-based workflows (like VS Code, Sublime Text, or Atom), open the entire Burger Boy Banner directory to access all project files efficiently.

2. Preview index.html in your browser to observe the pre-configured HTML structure. Notice how we've already established the three-panel foundation—this preparatory work demonstrates professional project setup that saves significant development time.

3. Now let's examine the DOM architecture. In your editor, analyze lines 14–31 to understand the structural hierarchy:

   <div id="banner">
      <div class="panel" id="panel1">
         <h1>hungry?</h1>
      </div>
      <div class="panel" id="panel2">
         <h2>How about now?</h2>
      </div>
      <div class="panel" id="panel3">
         <div id="info">

   Code Omitted To Save Space

   </div>
      </div>
   </div>

   This structure features three panel divs, each with unique IDs that correspond to their sequence order in our animation timeline. Each panel maintains identical dimensions (300px by 250px) and shares the common panel class for consistent styling. These three panels nest within a parent banner container, creating a clean, semantic structure that's both accessible and animation-friendly.

4. Examine lines 38–46 where we've established jQuery selector variables. These eight variables represent the core animation components you'll be manipulating:

   var $panel1 = $("#panel1"), 
       $panel2 = $("#panel2"), 
       $panel3 = $("#panel3"), 
       $panel1Text = $("#panel1 h1"), 
       $panel2Text = $("#panel2 h2"), 
       $info = $("#info"), 
       $list = $("li"), 
       $orderNow = $("#orderNow"),    
       tl;

   This variable caching approach significantly improves performance by eliminating repeated DOM queries—a crucial optimization in animation-heavy applications. We'll reference each element as we progress through the animation sequence, so familiarizing yourself with these eight targets now will accelerate your development process.

5. With our HTML structure and JavaScript foundation understood, let's formulate our animation strategy. The most efficient approach involves repositioning $panel2 and $panel3 to overlay $panel1 precisely.

   We'll leverage TimelineMax to orchestrate the reveal timing for $panel2 and $panel3 at precisely calculated moments. Since each panel maintains identical dimensions, the transitions will appear seamless and professional—a hallmark of quality banner advertising.

Creating the TimelineMax & Animating the First Panel

At this stage in your GSAP development journey, we're upgrading from TimelineLite to TimelineMax—a more powerful timeline engine that provides enhanced control over complex animation sequences. TimelineMax includes all TimelineLite functionality while adding advanced features like repeat controls, yoyo effects, and enhanced callback systems that are essential for professional banner animations.

NOTE: Since our project links to TweenMax, all necessary libraries are already available. TweenMax serves as a comprehensive package including TweenLite, CSSPlugin, EasePack, TimelineLite, TimelineMax, and additional utility plugins—making it the go-to solution for production environments.

1. Add the TimelineMax initialization code beneath the jQuery selectors, around line 48:

   $info = $("#info"), 
      $list = $("li"), 
      $orderNow = $("#orderNow"),    
      tl;
   
   tl = new TimelineMax();

2. With our TimelineMax instance created, we can begin adding sophisticated tweens. Let's initiate the first panel with a professional fade-in effect:

   tl = new TimelineMax();
   tl.from($panel1,0.5, {opacity:0})

   This creates a smooth opacity transition from 0 to 1 over half a second, establishing the red background of $panel1 as our animation foundation.

3. Save your file and preview index.html in the browser. The smooth fade-in immediately establishes professional quality.

4. Return to index.html in your code editor to continue building the sequence.

5. Chain the following tween to create an engaging entrance for the "hungry?" text with combined scaling and opacity effects:

   tl = new TimelineMax();
   tl.from($panel1,0.5, {opacity:0})
     .from($panel1Text, 0.5, {scale:0.5, opacity:0, ease:Back.easeOut})

   The Back.easeOut creates a subtle bounce effect that adds personality without being overly playful—perfect for food advertising where you want to capture attention while maintaining appetite appeal.

6. Save and preview the animation in your browser. The first panel now demonstrates professional timing and visual appeal that would meet commercial standards.

7. Return to your code editor to begin crafting the second panel transition.

Animating the Second Panel

The second panel introduces our hero element—the appetizing burger photograph—alongside a compelling call-to-action heading. This panel structure consists of the burger image as a background element and the "How about now?" text (referenced by $panel2Text) that will animate in to reinforce the hunger-inducing message.

Photo courtesy of istockphoto: Paul Johnson Photography, Image #5739487

1. First, we'll position $panel2 to overlay $panel1 perfectly by setting its top position to 0. Add this positioning tween:

   tl.from($panel1,0.5, {opacity:0}).from($panel1Text, 0.5, {scale:0.5, opacity:0, ease:Back.easeOut})
     .set($panel2, {top:0})

2. Save and test in your browser to observe the current behavior.

   The $panel2 immediately replaces the first panel, which creates an abrupt transition. While functionally correct, this lacks the sophistication expected in professional banner advertising. We need to allow adequate time for message absorption.

3. Return to your code editor to refine the timing.

4. Add a position parameter to create appropriate dwell time for the first panel:

   .set($panel2, {top:0}, "+=2")

   This two-second delay respects the audience's reading patterns and ensures message comprehension—a crucial consideration in effective advertising where rushed messaging reduces conversion rates.

5. Save and preview to confirm the improved pacing. The timing now allows for natural message processing while maintaining engagement.

6. Return to your editor to enhance the panel transition with visual interest.

7. Add a dynamic entrance effect for $panel2 that creates visual excitement:

   .set($panel2, {top:0}, "+=2")
   .from($panel2,0.2, {opacity:0, scale:1.5})

   This brief scaling transition creates a zoom effect that draws attention to the burger image—perfect for food advertising where visual impact drives appetite appeal.

8. Test the animation to experience the enhanced visual dynamics. The 0.2-second transition provides impact without overwhelming the message.

9. Return to your editor to animate the text element.

10. Add the sliding text animation that reinforces the hunger message:

    .from($panel2,0.2, {opacity:0, scale:1.5})
    .from($panel2Text, 0.2, {yPercent:100}, "+=0.5")

    The yPercent property utilizes percentage-based translations that automatically adapt to element dimensions—a crucial technique for responsive banner designs. This approach eliminates the need for manual height calculations while ensuring consistent animation behavior across different screen sizes and element variations.

11. Save and test the sliding text effect. Notice how the text elegantly rises from below the panel, creating a reveal that reinforces the messaging hierarchy.

12. Return to your editor to complete the second panel's narrative cycle.

13. Add the exit animation that prepares for the final panel transition:

    .from($panel2Text, 0.2, {yPercent:100}, "+=0.5")
    .to($panel2Text, 0.2, {yPercent:100}, "+=2")

    After allowing two seconds for message absorption, the text slides back down, maintaining visual continuity while preparing the stage for our call-to-action panel.

14. Test the complete second panel sequence to verify the timing and visual flow.

    You'll notice that the burger image scaling creates some visual overflow beyond the panel boundaries. While this adds dramatic impact, it needs refinement for professional presentation.

15. Open the stylesheet: Burger Boy Banner > css > style.css in your editor.

16. Locate the #banner rule (starting around line 8) and update the overflow property:

    #banner {
       position:relative;

    Code Omitted To Save Space

    overflow:hidden;
    }

    This CSS modification clips any content that extends beyond the banner boundaries, ensuring clean edges while preserving the dynamic scaling effect.

17. Save and test the refined animation. The overflow control creates a professional presentation while maintaining the visual impact of the scaling transition.

Animating the Third Panel

The final panel serves as our conversion-focused call-to-action, incorporating three strategic elements designed to drive user engagement. The red $info panel and "Burger Boy" branding establish visual hierarchy, while the staggered $list items provide compelling product details. The prominent $orderNow button completes the conversion funnel with a clear action opportunity.

1. Return to index.html in your code editor.

2. Position $panel3 to overlay the previous panels at the appropriate timeline moment:

   .to($panel2Text, 0.2, {yPercent:100}, "+=2")
   .set($panel3, {top:0})

3. Save and test to confirm $panel3 appears at the correct time, though currently without transition effects.

   To streamline development and testing of the final panel animations, we'll implement a timeline label that allows us to jump directly to this section during development—a time-saving technique professional animators use when working on complex sequences.

4. Add a timeline label to mark this development checkpoint:

   .set($panel3, {top:0}, "final")

5. Create some whitespace after the timeline chain and add a seek method to jump to our label during development:

   .set($panel3, {top:0}, "final")
   
   tl.seek("final")

   This development technique allows you to iterate quickly on the final panel without waiting through the entire animation sequence—essential for efficient professional workflow.

6. Test to confirm the timeline jumps directly to panel 3. Now we can focus on perfecting the final panel animations.

7. Add the primary info panel animation that introduces the branding and content area:

   .set($panel3, {top:0}, "final")
   .from($info, 0.5, {yPercent:100}, "final")
   
   tl.seek("final")

8. Save and test the info panel slide-up effect.

   The panel slides in smoothly, but notice it obscures the appetizing burger image we worked to perfect. Professional banner design requires balancing all visual elements for maximum impact.

Integrating TimelineMax's Repeat & RepeatDelay

Professional banner advertising requires continuous visibility to maximize impact and conversion opportunities. TimelineMax provides powerful repeat functionality that enables infinite animation loops with precise control over timing intervals. This capability is essential for banner ads that need to maintain user attention without becoming intrusive or annoying—a delicate balance in digital advertising.

1. Return to index.html in your code editor.

2. Around line 48, modify the TimelineMax constructor to include repeat parameters that will create professional looping behavior: