Creating a Simple Sequence

Topics Covered in This GreenSock Tutorial:

The TweenLite.from() Method, Relative Vs. Absolute Values, Pros & Cons of Sequencing Using Delays

Exercise Preview

Exercise Overview

In this exercise, we'll construct a sophisticated animated sequence using delay-based timing while exploring TweenLite's powerful from() method. Unlike the to() method, which defines end states, from() allows you to specify starting values and let elements animate naturally to their CSS-defined final positions. This approach is particularly valuable when building page-load sequences where elements need to appear from off-screen or invisible states.

Understanding from() tweens is crucial for professional web animation, as they maintain a clear separation between your CSS layout (the "final state") and your animation logic (the "reveal sequence"). This methodology ensures your animations degrade gracefully and remain maintainable as projects scale.

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 > Simple Sequence, and double–click on finished.html.

   You'll see a polished website for The Jive Factory, a restaurant and live music venue in Lower Manhattan. This example demonstrates how professional page-load animations can enhance user experience without overwhelming the content.

3. Study the sequence multiple times to analyze the animation timing and choreography. Reload the browser by hitting Cmd–R (Mac) or F5 (Windows). Pay attention to these key animation beats:
   • The page begins with a clean slate. After a brief pause, the header image featuring the Lower Manhattan skyline fades in smoothly.
   • The Jive Factory logo follows with a dynamic entrance—rotating and scaling in from the left with a satisfying overshoot that demonstrates the Back ease in action.
   • As the logo completes its animation, the address text slides in from the right, creating visual balance and maintaining user engagement.
   • Finally, the main content area rises from below, completing the reveal sequence with perfect timing.

   Notice how each element builds upon the previous one, creating a cohesive narrative that guides the user's eye through the page hierarchy.

Investigating the DOM Elements We'll Animate

1. In your preferred code editor, open start.html from the Simple Sequence folder.

2. Let's examine the page structure and identify our animation targets. Navigate to approximately line 66 and observe the strategically assigned IDs for our key elements, highlighted below:

   <div class="panel">
      <img id="bg" src="img/skyline.jpg" width="760" height="225">
      <img id="logo" src="img/jf-logo.png" width="250" height="216">
      <div id="address">580 Lispenard St. New York NY 10012</div>
   </div>
   <div id="content">
   <h1>The Jive Factory</h1>
   <p>The Jive Factory is a restaurant and venue in Lower Manhattan, dedicated to the best food and music the city has to offer. Stop in for dinner, stick around for a drink, and see the greatest up-and-coming acts in a small and friendly performance space.</p>
   
   <p>We have a dining room and a full bar on the ground floor, and a large concert space downstairs with a stage, open standing room, and a second bar in the back.</p>
   </div>

   DOM Element Targeting

   The exercise uses four key elements with IDs: bg (skyline image), logo (Jive Factory logo), address (restaurant address text), and content (main text area). Each ID allows precise targeting for animation.

The TweenLite.from() Method

Since our DOM elements are already positioned correctly for their final states, we'll use TweenLite.from() instead of to(). The from() method functions identically to to(), except the numeric values represent starting positions rather than destinations. This approach is particularly elegant for page-load animations because it allows your CSS to define the natural layout while your JavaScript handles the reveal choreography.

1. Return to your code editor to begin implementing the animation sequence.

2. Let's animate the first element in our sequence: the background image with ID bg. Around line 85, replace the placeholder comment with this method call:

   <script>
      TweenLite.from("#bg", 1, {opacity:0, delay:0.5});
   </script>

   The syntax mirrors TweenLite.to()—target element, duration, then properties. The crucial difference is that we're defining where the animation starts from rather than where it ends. The background will begin completely transparent (opacity: 0) and automatically animate to its CSS-defined opacity value (typically 1).

3. Save the file and preview it in your browser.

   You'll see a half-second pause followed by the background image fading in over one second. The remaining elements stay visible and unanimated—this is expected as we build the sequence incrementally. The page may look incomplete until we finish coding all animations.

4. Return to your code editor and examine what we've accomplished.

   In previous exercises, we created variables using document.getElementById() to target specific DOM elements. Here, we're leveraging a more flexible approach by passing a CSS selector string ("#bg") directly to TweenLite, which internally uses document.querySelectorAll() for element selection.

   The document.querySelectorAll() method provides exceptional flexibility for targeting elements using the same syntax you use in CSS:

   "h2":	Selects every <h2> tag on the page—useful for animating multiple headings simultaneously.
   ".feature":	Selects every element with class "feature"—perfect for animating groups of related elements.
   "h2.feature":	Selects only <h2> tags with class "feature"—ideal for precise targeting.

   This selector approach scales beautifully in production environments where you might need to animate dozens of elements with similar behavior. Learn more about advanced selector capabilities at: developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

5. Now let's animate the logo element. Add this line below your existing code:

   TweenLite.from("#bg", 1, {opacity:0, delay:0.5});
   TweenLite.from("#logo", 1, {left:-200});

6. Save and preview the file. The animation works, but we can make it much more engaging with additional transformation properties.

7. Enhance the logo animation by adding rotation and scale properties:

   TweenLite.from("#logo", 1, {left:-200, rotation:-90, scale:0});

8. Save and preview the updated animation. Much better! Now let's add some personality with easing.

9. Add a Back ease to create that satisfying overshoot effect:

   TweenLite.from("#logo", 1, {left:-200, rotation:-90, scale:0, ease:Back.easeOut});

10. Save and preview again. Excellent animation quality! However, we need to sequence this properly so the logo doesn't animate until the background completes.

11. Add appropriate delay timing to create our sequence:

    TweenLite.from("#logo", 1, {left:-200, rotation:-90, scale:0, ease:Back.easeOut, delay:1.5});

12. Save and preview the complete two-element sequence. Perfect timing! The logo begins animating exactly when the background finishes (background: 0.5s delay + 1s duration = 1.5s, matching our logo delay).

Relative Vs. Absolute Values

So far, we've used absolute values in our animations—specific numeric endpoints that don't consider the element's current state. GSAP also supports relative values using String syntax with += or -= prefixes, such as "+=200" or "-=200". This approach is invaluable when you need animations that adapt to dynamic layouts or when you want to create reusable animation functions that work regardless of an element's starting position.

Consider an element with a CSS left property of 100px. An absolute value tween sets a specific destination:

TweenLite.to(element, 1, {left:200}); // Moves to exactly 200px

A relative value tween adds to the current position:

TweenLite.to(element, 1, {left:"+=200"}); // Moves to 300px (100 + 200)

Relative values make your animations more flexible and maintainable, especially in responsive designs where element positions might vary across screen sizes.

1. Observe the address positioning in your browser preview. Notice it appears on the right side, indicating a substantial left value. Rather than hunting through CSS files for the exact pixel value, we can use relative positioning for a more maintainable approach.

2. Add the address animation using a relative value approach:

   TweenLite.from("#bg", 1, {opacity:0, delay:0.5});
   TweenLite.from("#logo", 1, {left:-200, rotation:-90, scale:0, ease:Back.easeOut, delay:1.5});
   TweenLite.from("#address", 1, {left:"+=100", opacity:0, ease:Back.easeOut, delay:2});

3. Save and preview the animation. The address text slides in from a position 100 pixels to the right of its final CSS position, creating a smooth rightward entrance.

4. To understand the difference, temporarily convert this to an absolute value by removing the quotation marks and += prefix:

   TweenLite.from("#address", 1, {left:100, opacity:0, ease:Back.easeOut, delay:2});

5. Save and preview this version. The dramatic difference illustrates why understanding absolute vs. relative values is crucial—the text now starts from only 100 pixels from the page edge, creating an entirely different (and less desirable) effect.

6. Restore the relative value using Cmd–Z (Mac) or CTRL–Z (Windows) until the code reads:

   TweenLite.from("#address", 1, {left:"+=100", opacity:0, ease:Back.easeOut, delay:2});

7. Complete the sequence by adding the content area animation:

   TweenLite.from("#address", 1, {left:"+=100", opacity:0, ease:Back.easeOut, delay:2});
   TweenLite.from("#content", 0.5, {opacity:0, top:100, delay:3});

8. Save and preview the complete sequence. The content area rises from below just as the address animation concludes, creating a perfectly choreographed four-part reveal sequence.

Downsides of Sequencing with Delays

While delay-based sequencing works well for simple animations, it has significant limitations in professional development environments. The approach creates brittle, interdependent timing that becomes increasingly difficult to maintain as projects scale. Understanding these limitations now will help you appreciate the more sophisticated timeline-based approaches we'll explore in upcoming lessons.

1. Return to your code editor to experience these limitations firsthand.

2. Modify the background animation's delay to simulate a common real-world scenario—a client requesting longer pause before the animation begins:

   TweenLite.from("#bg", 1, {opacity:0, delay:4});

3. Save and preview the results. The sequence now feels completely broken because all subsequent timing calculations are based on the original 0.5-second delay. In a production environment, this kind of change request would require recalculating and updating every subsequent animation's delay value.

4. Restore the original delay value using Cmd–Z (Mac) or CTRL–Z (Windows) until the delay returns to 0.5 seconds.

5. Save your work.

   Beyond maintenance challenges, delay-based sequences offer no runtime control—you cannot pause, reverse, speed up, or interact with the animation once it begins. Each tween runs independently, making it impossible to create the kind of sophisticated, controllable animations that modern web applications demand. Fortunately, TimelineLite and TimelineMax provide elegant solutions to all these limitations, which we'll explore in the next section.