Promo: SlowMo Ease: Free GreenSock Tutorial

Topics Covered in This GreenSock Tutorial:

Master the SlowMo Ease fundamentals, configure LinearRatio & Power parameters for precise control, implement staggered animations within timeline sequences, and leverage SlowMo's YoyoMode for sophisticated reversing effects.

Exercise Preview

Exercise Overview

In this comprehensive exercise, we'll elevate our Promo animation by implementing GSAP's proprietary SlowMo ease—one of the most sophisticated easing functions available for web animation. Unlike traditional easing methods that rely on mathematical curves, SlowMo provides granular control over motion pacing, allowing you to create cinematic effects that would otherwise require complex multi-tween sequences. We'll animate text elements with precision, exploring every parameter of this advanced easing behavior to achieve professional-grade motion graphics.

Previewing the Finished Animation

1. Launch Google Chrome to examine our target animation output.

2. Press Cmd–O (Mac) or Ctrl–O (Windows), navigate to Desktop > Class Files > yourname-GSAP Class > Promo SlowMo Done, and double-click index.html.

3. Watch the animation multiple times, paying close attention to the text's motion characteristics. Notice how each text element exhibits complex behavior involving opacity transitions, positional changes, and multiple easing types that flow seamlessly together.

   This sophisticated motion complexity is orchestrated entirely by GSAP's SlowMo ease, which we'll deconstruct and master throughout this exercise.

Examining the DOM Structure

Before diving into animation code, let's analyze the HTML foundation that makes our targeted animations possible.

1. Open yourname-GSAP Class > Promo SlowMo > index.html in your preferred code editor.

   NOTE: For optimal workflow efficiency, open the entire Promo SlowMo folder if your editor supports folder-based projects (Sublime Text, VS Code, Atom, etc.).

2. This file builds upon our previous exercise with crucial HTML structure additions on lines 18–25:

   <div id="demo">
      <div id="flyBy" class="panel">
         <div id="starfield"></div>
         <div class="title" id="title1">Animation</div>
         <div class="title" id="title2">Beyond</div>
         <div class="title" id="title3">Flash</div>
      </div>
   </div>

   Each text element (Animation, Beyond, and Flash) now occupies its own container div with unique identifiers. This modular structure provides precise targeting capabilities essential for complex timeline orchestration.

3. Preview index.html in your browser. The background starfield animation runs continuously while the three text elements remain static, styled but motionless, aligned to the panel's left edge.

Creating a Function & Positioning the Text

Now we'll establish our animation function architecture and configure initial text positioning for off-stage entrance effects.

1. Our first step involves creating a dedicated function for our text timeline. Switch to your code editor.

2. Below the getStarsTimeline() function (around line 47), add our new function structure:

   function getTitlesTimeline() {
   
   }
   
   getTitlesTimeline();
   getStarsTimeline();

3. Position the Animation text for off-stage left entry by adding this code to the getTitlesTimeline() function:

   function getTitlesTimeline() {
      TweenLite.set("#title1", {xPercent:-100});
   }
   
   getTitlesTimeline();

   The xPercent property calculates positioning relative to the element's width, just as yPercent uses height. Setting xPercent:-100 effectively positions the element one full width to the left of its natural position.

4. Save and preview in your browser.

   To verify our off-stage positioning accuracy, we need to visualize elements outside the animation boundaries. Let's temporarily adjust the overflow property.

5. Open Promo SlowMo > css > style.css in your editor.

6. Modify the #demo rule (around line 13) as shown:

   #demo {
      position:relative;
      width:500px;
      height:445px;
      background-color:,000;
      margin:auto; 
      overflow:visible;
   }

7. Save style.css and close the file.

8. Reload your browser to confirm the Animation text is completely off-stage left. Perfect positioning achieved!

9. Return to your editor and add this tween to move the text across the entire stage:

   function getTitlesTimeline() {
      TweenLite.set("#title1", {xPercent:-100});
      TweenLite.to("#title1", 3, {x:width});
   }

   This leverages the width variable established in our previous exercise (line 32) to animate #title1 from off-stage left to off-stage right over 3 seconds.

10. Save and preview. You'll notice the text stops at the stage's right edge rather than exiting completely—this occurs because xPercent remains at –100.

11. Correct this by resetting xPercent during the animation:

    function getTitlesTimeline() {
       TweenLite.set("#title1", {xPercent:-100});
       TweenLite.to("#title1", 3, {x:width, xPercent:0});
    }

12. Save and preview again. Excellent! The text now travels completely off-stage right, achieving our desired full-stage traverse effect.

Introduction to the SlowMo Ease

The SlowMo ease represents one of GSAP's most sophisticated timing functions. Let's explore its parameters and understand how this powerful tool can transform ordinary motion into cinematic experiences.

1. Apply the basic SlowMo ease to our existing tween:

   function getTitlesTimeline() {
      TweenLite.set("#title1", {xPercent:-100});
      TweenLite.to("#title1", 3, {x:width, xPercent:0, ease:SlowMo.ease});
   }

2. Save and preview the result. Notice the distinctive motion pattern: rapid initial movement, sustained linear motion, then rapid acceleration toward completion.

3. SlowMo's true power emerges through its config() method, which accepts two critical parameters:

   • linearRatio controls the proportion of the animation using linear (constant-speed) motion, expressed as a value between 0 and 1. The default is 0.7. Setting this to 0.5 means 50% linear motion, with 25% deceleration at the start and 25% acceleration at the end.
   • power determines the intensity of the ease transitions at each end, defaulting to 0.7. Values exceeding 1.0 create reverse motion during the linear portion, producing striking visual effects.

4. Implement custom SlowMo configuration:

   TweenLite.to("#title1", 3, {x:width, xPercent:0, ease:SlowMo.ease.config(0.9,0.8)});

   This configuration sets linearRatio to 0.9 and power to 0.8, creating this motion breakdown:

   • 5% easeOut (rapid deceleration)
   • 90% Linear (constant speed)
   • 5% easeIn (rapid acceleration)

5. Save and preview to observe the dramatic difference—very brief speed bursts bookending extended linear motion.

6. Experiment with the inverse configuration:

   TweenLite.to("#title1", 3, {x:width, xPercent:0, ease:SlowMo.ease.config(0.1, 0.8)});

   This linearRatio of 0.1 creates:

   • 45% easeOut
   • 10% Linear
   • 45% easeIn

7. Save and preview to witness how a single parameter dramatically alters the entire motion character.

8. Now explore power values exceeding 1.0:

   TweenLite.to("#title1", 3, {x:width, xPercent:0, ease:SlowMo.ease.config(0.1, 1.2)});

9. Save and preview this fascinating effect—the element actually reverses direction during the linear portion, creating a mesmerizing back-and-forth motion.

   These configuration options provide endless creative possibilities. Professional animators often spend considerable time fine-tuning these values to achieve precise motion characteristics that align with their design vision.

Using TimelineLite's StaggerTo() & StaggerFrom() Methods

TimelineLite's stagger methods provide elegant solutions for coordinating multiple element animations. These methods—staggerFrom(), staggerTo(), and staggerFromTo()—eliminate the need for complex manual timing calculations when animating element sequences.

1. Clear our experimental code and establish a clean foundation. Replace the getTitlesTimeline() function content:

   function getTitlesTimeline() {
   
   }

2. Create variables for our title elements and initialize a new timeline:

   function getTitlesTimeline() {
      var $titles = $(".title"), 
         tl = new TimelineLite();
   }

3. Position all title elements off-stage using timeline's set method:

   function getTitlesTimeline() {
      var $titles = $(".title"), 
          tl = new TimelineLite();
   
      tl.set($titles, {xPercent:-100})
   }

4. Save and preview to confirm all words now align their right edges with the panel's left boundary.

5. Return to your editor to implement staggered cross-screen animation.

6. Add the staggered movement tween:

   function getTitlesTimeline() {
      var $titles = $(".title"), 
          tl = new TimelineLite();
   
     tl.set($titles, {xPercent:-100})
       .staggerTo($titles, 3, {x:width, xPercent:0}, 0.3)
   }

   This applies identical 3-second animations to all title elements, with each subsequent animation beginning 0.3 seconds after the previous one starts. The stagger parameter creates that cascade effect essential to professional motion graphics. For comprehensive staggerTo() documentation, visit: greensock.com/docs/TimelineLite/staggerTo()

7. Save and preview the coordinated multi-element animation—already impressive!

8. Return to your editor to enhance with SlowMo easing.

9. Apply our sophisticated SlowMo configuration:

   .staggerTo($titles, 3, {x:width, xPercent:0, ease:SlowMo.ease.config(0.1,1.2)}, 0.3)

10. Save and preview this enhanced version. Observe how each word exhibits that distinctive rightward motion followed by leftward drift during the linear phase—the hallmark of power values exceeding 1.0.

    Now we'll add a complementary tween to introduce scale and opacity transitions.

11. Chain a staggerFrom tween for scale and opacity effects (note the semicolon—this completes our timeline):

    .staggerTo($titles, 3, {x:width, xPercent:0, ease:SlowMo.ease.config(0.1,1.2)}, 0.3)
    .staggerFrom($titles, 3, {scale:0, opacity:0}, 0.3, 0);

    This staggerFrom tween matches the duration and stagger timing of our staggerTo tween but animates from zero scale and opacity. The final 0 parameter sets the position to 0, ensuring perfect synchronization with our movement tween.

12. Save and preview this multi-dimensional animation—we're achieving truly cinematic results!

    Notice how scale and opacity continuously evolve throughout the animation duration. Let's synchronize these transitions with matching SlowMo easing.

13. Apply identical SlowMo configuration to the staggerFrom tween:

    .staggerFrom($titles, 3, {scale:0, opacity:0, ease:SlowMo.ease.config(0.1,1.2)}, 0.3, 0);

14. Save and preview this refined animation. Observe how scale and opacity changes now perfectly coordinate with the motion easing—subtle evolution during movement phases, stability during linear motion, then rapid changes during transitions.

SlowMo's Third Config() Parameter: YoyoMode

SlowMo's yoyoMode parameter provides an elegant solution for creating reversing animations without additional code complexity. This boolean parameter, false by default, can dramatically enhance visual interest.

1. Enable yoyoMode for our scale and opacity tween:

   .staggerFrom($titles, 3, {scale:0, opacity:0, ease:SlowMo.ease.config(0.1,1.2, true)}, 0.3, 0);

2. Save and preview this enhanced animation:

   • Focus on the animation's conclusion. YoyoMode creates automatic value reversal, returning scale and opacity toward their starting values of zero.
   • These reversals occur exclusively during SlowMo's easeIn and easeOut phases, creating sophisticated motion that would otherwise require complex timeline sequencing.

   YoyoMode transforms simple property animations into dynamic, attention-grabbing effects with minimal code overhead—a testament to GSAP's thoughtful API design.

Final Implementation Steps

To complete our professional animation, we'll restore the overflow property to its production-ready state.

1. Open Promo SlowMo > css > style.css in your editor.

2. Restore the overflow property for production deployment:

   #demo {
      position:relative;
      width:500px;
      height:445px;
      background-color:,000;
      margin:auto; 
      overflow:hidden;
   }

3. Save style.css and close the file.

4. Return to your browser and reload index.html to admire your completed professional animation. You've successfully mastered one of GSAP's most sophisticated easing functions!