Introducing the SlowMo Ease in GreenSock Animation Platform v12

This movie requires Flash Player 9

I am hugely excited to introduce you to the new SlowMo ease! This ease is a total game-changer and will make it insanely easy to create animations that were previously very tedious and awkward. The SlowMo ease allows you to get super smooth transitions into and out of steady linear eases. This singular ease seamlessly combines 3 eases and is incredibly flexible. Come inside to find out more!

Watch a Short Video to Learn all the Details


Watch the video directly on YouTube (great for mobile devices).

Official Description

SlowMo is a configurable ease that produces a slow-motion effect that decelerates initially, then moves linearly for a certain portion of the ease (which you can choose) and then accelerates again at the end; it’s great for effects like zooming text onto the screen, smoothly moving it long enough for people to read it, and then zooming it off the screen. Without SlowMo, animators would often try to get the same effect by sequencing 3 tweens, one with an easeOut, then another with a Linear.easeNone, and finally an easeIn but the problem was that the eases didn’t smoothly transition into one another, so you’d see sudden shifts in velocity at the joints. SlowMo solves this problem and gives you complete control over how strong the eases are on each end and what portion of the movement in the middle is linear.

The first parameter, linearRatio, determines the proportion of the ease during which the rate of change will be linear (steady pace). This should be a number between 0 and 1. For example, 0.5 would be half, so the first 25% of the ease would be easing out (decelerating), then 50% would be linear, then the final 25% would be easing in (accelerating). If you choose 0.8, that would mean 80% of the ease would be linear, leaving 10% on each end to ease. The default is 0.7.

The second parameter, power, determines the strength of the ease at each end. If you define a value greater than 1, it will actually reverse the linear portion in the middle which can create interesting effects. The default is 0.7.

*the text above is taken directly from the v12 Documentation.

Sample Code Usage

import com.greensock.*;
import com.greensock.easing.*;

//use the default SlowMo ease (linearRatio of 0.7 and power of 0.7)
TweenLite.to(mc, 5, {x:600, ease:SlowMo.ease});

//Configure a SlowMo ease with 50% of the tween being linear (2.5 seconds) and a power of 0.8
TweenLite.to(mc, 5, {x:600, ease:SlowMo.ease.config(0.5, 0.8)});

Experiment with the SlowMo Ease Visualizer

This movie requires Flash Player 9

The ease visualizer has been updated to illustrate yoyoMode. Please view my follow-up blog post that explains the awesome power of yoyoMode.

UPDATE: SlowMo Ease is now freely and publicly available in all of the GSAP v12 downloads.

-Carl

Post to Twitter Post to Facebook

This entry was posted in GreenSock Tweening Platform Tips. Bookmark the permalink.
  • So good.

  • NickSatoria
  • Carlschooff

    thanks Nick!

  • Ben Waller

    Great Tute and Great new feature! I’ve also Tweeted this.

    Cheers,
    Ben

  • Aziz Khambati

    I made a twitter account for this but that would be of no use as I’ve got no followers so I posted on Facebook as well. Hope that helps. 😀

  • Thanks axis. Good luck in the contest!

  • Brandon

    Freaking SWEEEEEEEET !     

  • Fantastic video Carl! Thanks for the overview. I haven’t had time to play with v12 but now I can’t wait.
    Looking forward to the next v12 overview video. Rock on!

  • Tim

    what do you do about alphaing something in and then out?

  • hey nick, you won! please check your twitter account for a DM from me.

  • thanks Patrick. there are a ton of great time-saving features in v12. very excited for it to get released. 

  • thank you Ben.

  • NickSatoria

    Thanks so much, Carl! To show you, how much I appreciate it, I will help spreading the word on twitter and facebook, regarding your future tutorials. 😉

  • That’s great Nick. Every little bit of promotion is greatly appreciated. I’m very fortunate that GreenSock has donated these memberships to help me show my appreciation back to my readers. Congratulations and thank you once again.

    -carl

  • Thanks for the question. That was actually one of my own questions when I started messing with SlowMo. I have some ideas to share. Hope to post back here later tonight.

    -carl

  • hey tim, sorry for the delay. I had a way of figuring out how to accurately match the timing of the alpha tweens with the SlowMo position tween. I was reluctant to post it as it was a bit intimidating. GreenSock has added a new param to the ease that makes it SUPER simple to achieve the effect you are after. I hope to update this post or create a new one some time this week. a little short on time right now 🙁 

  • Mike

    Jack owns you big time ; >)  GREAT intro. So much so I renewed my Shockingly Green. I was going to test v12 out by grabbing an old project replacing all my triple tweens with the new SlowMo. But the project seem to hang up on the add label – tl.addLabel(“intro”, tl.duration); – another technique you introduced to the world. The release notes gave me a headache with all the new features so I may be missing something. Is there a new way to label the timeline?

  • thanks for the thoughtful note.

    the biggest “conversion headache” of migrating from v11 to v12 is going to relate to the switch from the typical getter/setter props being converted to methods.

    for instance in v11

    you could do

    //get
    trace( tl.currentTime );

    //set
    tl.currentTime = 2

    in v12
    //get
    trace( tl.time() );

    //set
    tl.time( 2 )

    so for your problem, you have to use the duration *method*

    tl.addLabel( “someLabel”, tl.duration() );

    OR you can now just append a label

    tl.append(“intro”); //super cool

    and yes, the release notes are quite a read but well worth the time!

  • Mike

    Just wanted to let you know.

    IT WORKED. SUPER COOL.

    Something actually worked today.

    THANKS!

    After picking up your tut on addLabel it would be hard to live without.

    Another question. Are the “words” in your presentation all separate objects? Or are you using the SplitTextField?

  • Cool. And yeah words is just an array of movieclips. Nothing fancy.

  • Ben

    hi carl,

    Has anyone noticed the masking happening over some letters in your demo above? It’s more noticable in demo1, 2 and 5. When I watch the “Introducting” word fly on stage, a little of the letter “g” gets masked, hidden for a fraction of a sec. It happens very quickly. Maybe is late but can anyone else see it?
    Ben

  • Mike

    Do you how motion blur will work with this ease? The plugin isn’t included with the beta. Your demo uses position. Was just curious if the blur would increase with the speed.

  • Snefer

    Carl please show us some as3 python|perl postgres aproach ! please please please ;d

  • Dave Kaplan

    That’s so cool! Thanks for another great explaining!! 
    NO DOUBT I’m excited for the v12

  • Smily

     I believe that’s a bug that has been in the Flash renderer for a while now. A quick and dirty fix would be having a larger fully-transparent background rectangle behind the word, so you force the redraw on areas larger than the word itself.

  • Brandon

    Pretty great !   This is what I’m waiting on.  

  • Hey Brandon, The new yoyoMode feature will be featured in a new video/blog post going up today! hopefully w/i 2 hours. stay tuned to fb/twitter!

    -carl

  • Brandon

    Creating a second tween to sync with it works out pretty well.. .. utilizing the yoyo:true parameter in the .config()

    t1.alpha = t2.alpha = t3.alpha = t1.x = t2.x = t3.x = 0;

    TweenMax.allTo([t1, t2, t3], 5, {x:600,    ease:SlowMo.ease.config(.02, .8)}, .3);
    TweenMax.allTo([t1, t2, t3], 5, {alpha:1, ease:SlowMo.ease.config(.02, .8, true)}, .3);

  • yup, that’s exactly how it works. good job! new post is now live: http://bit.ly/HRYQwn

  • Yesssssssss. Finally got around to watching the tutorial. Now this has some real possibilities. V12 rules again.