GreenSock: Animating an HTML5 Ad (Google Banner Ads)

Topics Covered in This JavaScript Tutorial:

Linking to the Google Hosted Version of GreenSock, Creating a Timeline & Animating Multiple Scenes, X & Y Versus XPercent & YPercent, Timeline Labels & Using Seeking to Jump to a Specific Part of a Timeline

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll master the art of creating professional animated HTML5 banner ads for Google Ads using the industry-standard GreenSock Animation Platform (GSAP). This project combines multiple advanced animation techniques that you'll use regularly in professional web development. We'll emphasize proven workflows and coding best practices that scale from simple banners to complex interactive experiences, ensuring you build maintainable, performant animations that meet today's digital advertising standards.

Previewing the Finished Animation

1. On your Desktop (the Finder on Mac or Windows Explorer on Windows), navigate to the Class Files folder, then JavaScript Class.
2. Open the Done folder, then enter the GSAP-Ad-Banner directory.

3. CTRL–click (Mac) or Right–click (Windows) on index.html, select Open with and choose your preferred browser.

   Study the animation carefully through multiple cycles to understand the timing, pacing, and element interactions. Professional banner ads rely on precise choreography to capture attention without overwhelming viewers. This animation demonstrates a three-panel narrative structure—a proven approach in digital advertising that builds engagement through progressive revelation:

   

   Notice how each panel serves a specific purpose: the opening creates intrigue, the middle panel provides visual appeal and context, and the final panel delivers the call-to-action. This three-act structure mirrors effective storytelling principles and is commonly used by creative teams when designing animated advertisements. Understanding this framework will help you collaborate effectively with designers and create more compelling user experiences.

Linking to the Google Hosted Version of GreenSock

1. Launch your code editor and prepare your development environment.
2. For this exercise, we'll work with the GSAP-Ad-Banner folder located in Desktop > Class Files > JavaScript Class. Open this folder in your code editor if it supports project-based workflows (such as Visual Studio Code, Sublime Text, or WebStorm).
3. In your code editor, open index.html from the GSAP-Ad-Banner folder.

4. Before examining the page structure, let's address a crucial consideration for Google Ads development: asset optimization and CDN usage.

   Google Ads enforces strict file size limitations—currently 150KB total for all assets including HTML, CSS, images, and custom JavaScript. This constraint makes every byte count in professional ad development. Fortunately, Google provides a hosted version of GSAP that doesn't count against your file size quota, making it the optimal choice for banner ad development. This CDN approach also ensures faster loading times and leverages Google's global infrastructure for optimal performance.

5. Scroll to the bottom of the HTML file and locate the script tag that links to the Google-hosted GSAP library.

   This CDN link is maintained at Google's official GSAP resource page: tinyurl.com/gads-gs. Always use the most current version provided by Google to ensure compatibility and access to the latest performance optimizations.

With our animation library configured, let's examine the underlying HTML structure that will serve as the foundation for our multi-panel animation sequence.

Examining the DOM Structure

1. Preview index.html in a browser to see the current static layout.

   The initial setup displays all three panels in a vertical storyboard arrangement—a strategic approach for complex animation development. This methodology allows you to visualize the complete narrative flow, verify content positioning, and identify potential layout issues before implementing any motion graphics. Professional animation workflows always begin with solid static layouts, as attempting to animate poorly structured HTML often leads to positioning conflicts and maintenance difficulties.

2. Return to your code editor and examine the HTML structure, paying particular attention to the semantic organization and naming conventions:

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

   This structure demonstrates professional naming conventions: each of the three panel divs maintains a unique, sequential ID while sharing a common class for shared styling. The consistent naming pattern (panel1, panel2, panel3) makes the code self-documenting and easier to maintain. Each panel measures exactly 300px by 250px—dimensions that comply with Google Ads' standard banner specifications.

3. Now let's establish our animation strategy. The most efficient approach involves repositioning #panel2 and #panel3 to overlay #panel1 precisely, creating a seamless layered stack.

   We'll orchestrate the reveals using GSAP's timeline functionality, with each panel appearing at calculated intervals. Since all panels share identical dimensions, the transitions will appear seamless to viewers. This layering technique is fundamental to creating smooth, professional banner animations that maintain visual consistency throughout the sequence.

With our structural foundation understood, we can begin implementing the timeline-based animation system that will bring this static layout to life.

Creating the Timeline & Animating the First Panel

1. In the script tag at the bottom of the file, initialize a new GSAP timeline by adding the following code:

   <script>
      let tl = gsap.timeline();
   </script>

   GSAP timelines provide superior control over complex animation sequences compared to individual tweens, allowing precise timing coordination and easier maintenance.

2. Now we'll create the opening animation that sets the stage for our banner's narrative. Add this engaging entrance effect:

   <script>
      let tl = gsap.timeline();
      tl.from('#panel1-text', {duration:0.5, scale:0.5, opacity:0, ease:'back.out'})
   </script>

   This animation uses GSAP's "back.out" easing function, which creates a subtle bounce effect that draws attention without being overly aggressive—perfect for professional advertising contexts.

3. Save your file and reload the page in the browser to test the animation.

   • The word hungry? should scale up smoothly with the characteristic back-ease bounce.

     If the animation fails to execute despite correct code, disable any ad blockers in your browser. Many ad blockers interfere with GSAP's Google CDN, preventing the library from loading properly.

   • Excellent! The opening panel demonstrates the kind of polished, attention-grabbing entrance that makes banner ads effective. Now we'll build upon this foundation with the second panel's more complex reveal sequence.

With our opening sequence established, let's escalate the visual impact by introducing the second panel's multi-element animation.

Animating the Second Panel

The second panel combines visual and textual elements strategically: a compelling burger background image paired with bold overlay text reading How about now? This panel demonstrates how effective banner ads layer visual appetite appeal with direct, conversational copy that builds on the initial question.

1. Position #panel2 to overlay #panel1 precisely by setting its top position to 0. This leverages the absolute positioning already defined in our CSS:

   .from('#panel1-text', {duration:0.5, scale:0.5, opacity:0, ease:'back.out'})
   .set('#panel2', {top:0})

2. Save and reload the page to observe the current behavior.

   You'll notice #panel2 immediately covers #panel1 as soon as the opening text completes its entrance. While functionally correct, this rapid transition doesn't give viewers adequate time to process the opening message—a critical consideration in advertising effectiveness.

3. Improve the pacing by adding a strategic pause that respects your audience's reading speed:

   .set('#panel2', {top:0}, '+=2')

   This position parameter creates a 2-second reading window, following industry best practices for text-based advertising content. Research shows that viewers need 1.5-2.5 seconds to comfortably process short advertising messages.

4. Save and reload the page to test the improved timing.

   The pacing feels much more natural, but the abrupt panel switch lacks the visual sophistication expected in professional advertising. Let's add a dynamic transition that maintains viewer engagement.

5. Create a compelling entrance effect for #panel2 that adds visual energy to the transition:

   .set('#panel2', {top:0}, '+=2')
   .from('#panel2', {duration:0.2, opacity:0, scale:1.5})

   This scale-down effect creates the impression that the burger image is "zooming into focus," a popular technique in food advertising that creates immediate visual impact.

6. Save and reload the page to evaluate the transition.

   The dynamic scaling transition significantly elevates the professional quality of the banner. This type of bold, confident motion is essential for cutting through the visual noise of digital advertising environments.

7. Complete the second panel sequence by animating the text overlay with a slide-up reveal:

   .from('#panel2', {duration:0.2, opacity:0, scale:1.5})
   .from('#panel2-text', {duration:0.2, yPercent:100}, '+=0.5')

Animating the Third Panel

The final panel serves as the conversion-focused conclusion of our advertising sequence. It features a prominent red information panel containing key messaging (displayed as list items) and a compelling #order-now call-to-action button. This panel's animation must balance urgency with professionalism, encouraging immediate action while maintaining the sophisticated tone established by the previous panels.

1. Position #panel3 to overlay the previous panels, maintaining our layered reveal strategy:

   .to('#panel2-text', {duration:0.2, yPercent:100}, '+=2')
   .set('#panel3', {top:0})

2. Save and reload the page to observe the current transition behavior.

   The third panel appears at the correct moment but lacks the smooth sophistication we've established. To expedite development and testing of the remaining animations, we'll implement a timeline label system that allows us to jump directly to this section during development.

3. Add a timeline label to create a development checkpoint at the third panel's entrance:

   .set('#panel3', {top:0}, 'final')

   Timeline labels are invaluable for complex animation development, allowing you to test specific sections without waiting through the entire sequence repeatedly.

4. Create separation between the timeline definition and our development seek command, then implement the jump functionality:

   .set('#panel3', {top:0}, 'final')
   
      tl.seek('final');
   </script>

   This temporarily bypasses the first two panels, allowing us to focus exclusively on perfecting the final sequence.

5. Save and reload the page to confirm the seek functionality is working.

   The page should now display only the static third panel, with no animation occurring. This confirms we've successfully jumped to the final timeline position.

6. Implement the information panel's entrance with a smooth upward slide that reveals the content dynamically:

   .set('#panel3', {top:0}, 'final')
   .from('#info', {duration:0.5, yPercent:100})
   
   tl.seek('final');

7. Save and reload the page to test the panel slide animation.

   • The red information panel should slide smoothly upward from below the banner area.
   • Notice that the #info panel currently obscures the most visually appealing portion of the burger image. We'll address this by repositioning the background image to maintain visual appeal while accommodating the overlay content.

   Advanced Animation Techniques

   Stagger Animations

   Create dynamic list animations where items appear in sequence with controlled delays between each element.

   Simultaneous Animations

   Use position parameters like '<' to make multiple elements animate at the same time for coordinated effects.

Hiding Overflow

During the second panel's scaling animation, the burger image intentionally extends beyond the banner boundaries to create visual impact. However, this "bleed" effect should remain invisible to maintain clean, professional presentation standards expected in digital advertising.

1. In your code editor, navigate to the css folder and open main.css to access the banner styling rules.

2. Locate the #banner rule and update the overflow property to contain the scaling animation within the banner boundaries:

   #banner {
      overflow: hidden;

   Code Omitted To Save Space

   }

   This CSS adjustment ensures that all animation effects remain contained within the banner's defined dimensions, preventing visual artifacts that could detract from the professional presentation.

3. Save your CSS file and reload the page in the browser.

   The animation now maintains perfect visual boundaries while preserving all the dynamic scaling effects that make the banner engaging. This attention to detail separates professional-grade banner ads from amateur implementations.

With our core animation polished, let's implement an optional enhancement that increases advertisement effectiveness through strategic repetition.

Optional Enhancement: Implementing Animation Looping

Banner ad effectiveness often depends on repeated exposure, as viewers may not notice or fully process the message on the first viewing. Strategic looping with appropriate delays respects user attention while maximizing message retention and potential conversion opportunities.

1. Enhance the timeline initialization with professional looping parameters that balance persistence with user experience:

   let tl = gsap.timeline( {repeat:3, repeatDelay:2} );

   This configuration creates four total animation cycles (the initial play plus three repeats) with a 2-second pause on the call-to-action panel. This timing allows viewers to read and potentially interact with the final message before the sequence restarts.

2. Save the file and preview in your browser to observe the looping behavior.

   The animation now cycles professionally, creating multiple engagement opportunities without becoming intrusive. The strategic pause on the final panel respects user decision-making time while maintaining message visibility—a balance crucial for effective digital advertising performance.

Congratulations! You've successfully created a professional-grade animated banner ad that demonstrates industry best practices in timing, visual hierarchy, narrative structure, and technical implementation. This project showcases the kind of polished, engaging content that drives results in today's competitive digital advertising landscape.