API Documentation | All Packages | All Classes | Index | Frames No Frames |
Class ThrowPropsPlugin

Package | com.greensock.plugins
Class | public class ThrowPropsPlugin
Inheritance | ThrowPropsPlugin TweenPlugin

`ThrowPropsPlugin` allows you to simply define an initial velocity for a property (or multiple properties) as well as optional maximum and/or minimum end values and then it will calculate the appropriate landing position and plot a smooth course based on the easing equation you define (Quad.easeOut by default, as set in TweenLite). This is perfect for flick-scrolling or animating things as though they are being thrown.
For example, let's say a user clicks and drags a ball and you track its velocity using an `ENTER_FRAME` handler and then when the user releases the mouse button, you'd determine the velocity but you can't do a normal tween because you don't know exactly where it should land or how long the tween should last (faster initial velocity would mean a longer duration). You need the tween to pick up exactly where the user left off so that it appears to smoothly continue moving in the same direction and at the same velocity they were dragging and then decelerate based on whatever ease you define in your tween.
Oh, and one more challenge: maybe you want the final resting value to always lie within a particular range so that things don't land way off the edge of the screen. But you don't want it to suddenly jerk to a stop when it hits the edge of the screen; instead, you want it to ease gently into place even if that means going past the landing spot briefly and easing back (if the initial velocity is fast enough to require that). The whole point is to make it look smooth.
No problem.
In its simplest form, you can pass just the initial velocity for each property like this:
`TweenLite.to(mc, 2, {throwProps:{x:500, y:-300}});`
In the above example, `mc.x` will animate at 500 pixels per second initially and `mc.y` will animate at -300 pixels per second. Both will decelerate smoothly until they come to rest 2 seconds later (because the tween's duration is 2 seconds).
To use the `Strong.easeOut` easing equation and impose maximum and minimum boundaries on the end values, use the object syntax with the `max` and `min` special properties like this:
`TweenLite.to(mc, 2, {throwProps:{x:{velocity:500, max:1024, min:0}, y:{velocity:-300, max:720, min:0}}, ease:Strong.easeOut});`
Notice the nesting of the objects ({}). The `max` and `min` values refer to the range for the final resting position (coordinates in this case), NOT the velocity. So `mc.x` would always land between 0 and 1024 in this case, and `mc.y` would always land between 0 and 720. If you want the target object to land on a specific value rather than within a range, simply set `max` and `min` to identical values. Also notice that you must define a `velocity` value for each property.
ThrowPropsPlugin isn't just for tweening x and y coordinates. It works with any numeric property, so you could use it for spinning the `rotation` of an object as well. Or the `scaleX`/`scaleY` properties. Maybe the user drags to spin a wheel and lets go and you want it to continue increasing the `rotation` at that velocity, decelerating smoothly until it stops.
One of the trickiest parts of creating a `throwProps` tween that looks fluid and natural, particularly if you're applying maximum and/or minimum values, is determining its duration. Typically it's best to have a relatively consistent level of resistance so that if the initial velocity is very fast, it takes longer for the object to come to rest compared to when the initial velocity is slower. You also may want to impose some restrictions on how long a tween can last (if the user drags incredibly fast, you might not want the tween to last 200 seconds). The duration will also affect how far past a max/min boundary the property can potentially go, so you might want to only allow a certain amount of overshoot tolerance. That's why `ThrowPropsPlugin` has a few static helper methods that make managing all these variables much easier. The one you'll probably use most often is the `to()` method which is very similar to `TweenLite.to()` except that it doesn't have a `duration` parameter and it adds several other optional parameters. Read the docs below for details.
Feel free to experiment with using different easing equations to control how the values ease into place at the end. You don't need to put the "ease" special property inside the `throwProps` object. Just keep it in the same place it has always been, like:
`TweenLite.to(mc, 1, {throwProps:{x:500, y:-300}, ease:Strong.easeOut});`
A unique convenience of ThrowPropsPlugin compared to most other solutions out there which use `ENTER_FRAME` loops is that everything is reverseable and you can jump to any spot in the tween immediately. So if you create several `throwProps` tweens, for example, and dump them into a TimelineLite, you could simply call `reverse()` on the timeline to watch the objects retrace their steps right back to the beginning.
(note: it is best to use an `easeOut` with `throwProps` tweens, but you can vary the strength by using different flavors like `Strong.easeOut, Cubic.easeOut, Quad.easeOut, Back.easeOut`, etc.)
The following example creates a Sprite (`mc`), populates it with a long TextField and makes it vertically draggable. Then it tracks its velocity in an `ENTER_FRAME` handler and then allows it to be thrown within the bounds defined by the `bounds` rectangle, smoothly easing into place regardless of where and how fast it is thrown:

Example
Example AS3 code:

    import com.greensock.*;
    import flash.events.MouseEvent;
    import com.greensock.plugins.*;
    import com.greensock.easing.*;
    import flash.geom.Rectangle;
    import flash.utils.getTimer;
    import flash.text.*;
    import flash.display.*;

    TweenPlugin.activate([ThrowPropsPlugin]);

    var bounds:Rectangle = new Rectangle(30, 30, 250, 230);
    var mc:Sprite = new Sprite();
    addChild(mc);
    setupTextField(mc, bounds, 20);

    //some variables for tracking the velocity of mc
    var t1:uint, t2:uint, y1:Number, y2:Number;

    mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

    function mouseDownHandler(event:MouseEvent):void {
     TweenLite.killTweensOf(mc);
     y1 = y2 = mc.y;
     t1 = t2 = getTimer();
     mc.startDrag(false, new Rectangle(bounds.x, -99999, 0, 99999999));
     mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
     mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
    }

    function enterFrameHandler(event:Event):void {
     //track velocity using the last 2 frames for more accuracy
     y2 = y1;
     t2 = t1;
     y1 = mc.y;
     t1 = getTimer();
    }

    function mouseUpHandler(event:MouseEvent):void {
     mc.stopDrag();
     mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
     mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
     var time:Number = (getTimer() - t2) / 1000;
     var yVelocity:Number = (mc.y - y2) / time;
     var yOverlap:Number = Math.max(0, mc.height - bounds.height);
     ThrowPropsPlugin.to(mc, {ease:Strong.easeOut, throwProps:{y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:200}}}, 10, 0.25, 1);
    }

    function setupTextField(container:Sprite, bounds:Rectangle, padding:Number=20):void {
     var tf:TextField = new TextField();
     tf.width = bounds.width - padding;
     tf.x = tf.y = padding / 2;
     tf.defaultTextFormat = new TextFormat("_sans", 12);
     tf.text = "Click and drag this content and then let go as you're dragging to throw it. Notice how it smoothly glides into place, respecting the initial velocity and the maximum/minimum coordinates.\n\nThrowPropsPlugin allows you to simply define an initial velocity for a property (or multiple properties) as well as optional maximum and/or minimum end values and then it will calculate the appropriate landing position and plot a smooth course based on the easing equation you define (Quad.easeOut by default, as set in TweenLite). This is perfect for flick-scrolling or animating things as though they are being thrown.\n\nFor example, let's say a user clicks and drags a ball and you track its velocity using an ENTER_FRAME handler and then when the user releases the mouse button, you'd determine the velocity but you can't do a normal tween because you don't know exactly where it should land or how long the tween should last (faster initial velocity would mean a longer duration). You need the tween to pick up exactly where the user left off so that it appears to smoothly continue moving at the same velocity they were dragging and then decelerate based on whatever ease you define in your tween.\n\nAs demonstrated here, maybe the final resting value needs to lie within a particular range so that the content doesn't land outside a particular area. But you don't want it to suddenly jerk to a stop when it hits the edge; instead, you want it to ease gently into place even if that means going past the landing spot briefly and curving back (if the initial velocity is fast enough to require that). The whole point is to make it look smooth.";
     tf.multiline = tf.wordWrap = true;
     tf.selectable = false;
     tf.autoSize = TextFieldAutoSize.LEFT;
     container.addChild(tf);

     container.graphics.beginFill(0xFFFFFF, 1);
     container.graphics.drawRect(0, 0, tf.width + padding, tf.textHeight + padding);
     container.graphics.endFill();
     container.x = bounds.x;
     container.y = bounds.y;

     var crop:Shape = new Shape();
     crop.graphics.beginFill(0xFF0000, 1);
     crop.graphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
     crop.graphics.endFill();
     container.parent.addChild(crop);
     container.mask = crop;
    }

ThrowPropsPlugin is a Club GreenSock membership benefit. You must have a valid membership to use this class without violating the terms of use. Visit http://www.greensock.com/club/ to sign up or get more details.
Copyright 2011, GreenSock. All rights reserved. This work is subject to the terms in http://www.greensock.com/terms_of_use.html or for corporate Club GreenSock members, the software agreement that was issued with the corporate membership.

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined by
--- | --- | ---
|  | changeFactor : Number | TweenPlugin
|  | defaultResistance : Number = 100 [static] The default `resistance` that is used to calculate how long it will take for the tweening property (or properties) to come to rest by the static `ThrowPropsPlugin.to()` and `ThrowPropsPlugin.calculateTweenDuration()` methods. | ThrowPropsPlugin

Public Methods

| Method | Defined by
--- | --- | ---
|  | calculateChange(velocity:Number, ease:Function, duration:Number, checkpoint:Number = 0.05):Number [static] Determines the amount of change given a particular velocity, an specific easing equation, and the duration that the tween will last. | ThrowPropsPlugin
|  | calculateDuration(start:Number, end:Number, velocity:Number, ease:Function, checkpoint:Number = 0.05):Number [static] Calculates the duration (in seconds) that it would take to move from a particular start value to an end value at the given initial velocity, decelerating according to a certain easing equation (like `Strong.easeOut`). | ThrowPropsPlugin
|  | calculateTweenDuration(target:Object, vars:Object, maxDuration:Number = 100, minDuration:Number = 0.25, overshootTolerance:Number = 1):Number [static] Analyzes various throwProps variables (like initial velocities, max/min values, and resistance) and determines the appropriate duration. | ThrowPropsPlugin
|  | to(target:Object, vars:Object, maxDuration:Number = 100, minDuration:Number = 0.25, overshootTolerance:Number = 1):TweenLite [static] Automatically analyzes various throwProps variables (like `velocity`, `max`, `min`, and `resistance`) and creates a TweenLite instance with the appropriate duration. | ThrowPropsPlugin

Public Constants
Hide Inherited Public Constants
Show Inherited Public Constants

| Constant | Defined by
--- | --- | ---
|  | VERSION : Number = 1.4 [static] | TweenPlugin

Property detail

defaultResistance | property

`public static var defaultResistance:Number = 100`

The default `resistance` that is used to calculate how long it will take for the tweening property (or properties) to come to rest by the static `ThrowPropsPlugin.to()` and `ThrowPropsPlugin.calculateTweenDuration()` methods. Keep in mind that you can define a `resistance` value either for each individual property in the `throwProps` tween like this:
`ThrowPropsPlugin.to(mc, {throwProps:{x:{velocity:500, resistance:150}, y:{velocity:-300, resistance:50}}});`
OR you can define a single `resistance` value that will be used for all of the properties in that particular `throwProps` tween like this:
`ThrowPropsPlugin.to(mc, {throwProps:{x:500, y:-300, resistance:150}});
//-OR-
ThrowPropsPlugin.to(mc, {throwProps:{x:{velocity:500, max:800, min:0}, y:{velocity:-300, max:800, min:100}, resistance:150}});`

Method detail

calculateChange | () | method

`public static function calculateChange(velocity:Number, ease:Function, duration:Number, checkpoint:Number = 0.05):Number`

Determines the amount of change given a particular velocity, an specific easing equation, and the duration that the tween will last. This is useful for plotting the resting position of an object that starts out at a certain velocity and decelerates based on an ease (like `Strong.easeOut`).

Parameters

| `velocity:Number` — The initial velocity
| `ease:Function` — The easing equation (like `Strong.easeOut` or `Quad.easeOut`).
| `duration:Number` — The duration (in seconds) of the tween
| `checkpoint:Number` (default = `0.05`)`` — A value between 0 and 1 (typically 0.05) that is used to measure an easing equation's initial strength. The goal is for the value to have moved at the initial velocity through that point in the ease. So 0.05 represents 5%. If the initial velocity is 500, for example, and the ease is `Strong.easeOut` and `checkpoint` is 0.05, it will measure 5% into that ease and plot the position that would represent where the value would be if it was moving 500 units per second for the first 5% of the tween. If you notice that your tween appears to start off too fast or too slow, try adjusting the `checkpoint` higher or lower slightly. Typically 0.05 works great.

Returns

| `Number` — The amount of change (can be positive or negative based on the velocity)

calculateDuration | () | method |

`public static function calculateDuration(start:Number, end:Number, velocity:Number, ease:Function, checkpoint:Number = 0.05):Number`

Calculates the duration (in seconds) that it would take to move from a particular start value to an end value at the given initial velocity, decelerating according to a certain easing equation (like `Strong.easeOut`).

Parameters

| `start:Number` — Starting value
| `end:Number` — Ending value
| `velocity:Number` — the initial velocity at which the starting value is changing
| `ease:Function` — The easing equation used for deceleration (like `Strong.easeOut` or `Quad.easeOut`).
| `checkpoint:Number` (default = `0.05`)`` — A value between 0 and 1 (typically 0.05) that is used to measure an easing equation's initial strength. The goal is for the value to have moved at the initial velocity through that point in the ease. So 0.05 represents 5%. If the initial velocity is 500, for example, and the ease is `Strong.easeOut` and `checkpoint` is 0.05, it will measure 5% into that ease and plot the position that would represent where the value would be if it was moving 500 units per second for the first 5% of the tween. If you notice that your tween appears to start off too fast or too slow, try adjusting the `checkpoint` higher or lower slightly. Typically 0.05 works great.

Returns

| `Number` — The duration (in seconds) that it would take to move from the start value to the end value at the initial velocity provided, decelerating according to the ease.

calculateTweenDuration | () | method |

`public static function calculateTweenDuration(target:Object, vars:Object, maxDuration:Number = 100, minDuration:Number = 0.25, overshootTolerance:Number = 1):Number`

Analyzes various throwProps variables (like initial velocities, max/min values, and resistance) and determines the appropriate duration. Typically it is best to use the `ThrowPropsPlugin.to()` method for this, but `calculateTweenDuration()` could be convenient if you want to create a TweenMax instance instead of a TweenLite instance (which is what `throwPropsPlugin.to()` returns).

Parameters

| `target:Object` — Target object whose properties the tween affects. This can be ANY object, not just a DisplayObject.
| `vars:Object` — An object containing the end values of the properties you're tweening, and it must also contain a `throwProps` object. For example, to create a tween that tweens `mc.x` at an initial velocity of 500 and `mc.y` at an initial velocity of -300 and applies a `resistance`of 80 and uses the `Strong.easeOut` easing equation and calls the method `tweenCompleteHandler` when it is done, the `vars` object would look like: `{throwProps:{x:500, y:-300, resistance:80}, ease:Strong.easeOut, onComplete:tweenCompleteHandler}`.``
| `maxDuration:Number` (default = `100`)`` — Maximum duration (in seconds)
| `minDuration:Number` (default = `0.25`)`` — Minimum duration (in seconds)
| `overshootTolerance:Number` (default = `1`)`` — sets a maximum number of seconds that can be added to the tween's duration (if necessary) to accommodate temporarily overshooting the end value before smoothly returning to it at the end of the tween. This can happen in situations where the initial velocity would normally cause it to exceed the `max` or `min` values. An example of this would be in the iOS (iPhone or iPad) when you flick-scroll so quickly that the content would shoot past the end of the scroll area. Instead of jerking to a sudden stop when it reaches the edge, the content briefly glides past the max/min position and gently eases back into place. The larger the `overshootTolerance` the more leeway the tween has to temporarily shoot past the max/min if necessary.

Returns

| `Number` — The duration (in seconds) that the tween should use.

to | () | method |

`public static function to(target:Object, vars:Object, maxDuration:Number = 100, minDuration:Number = 0.25, overshootTolerance:Number = 1):TweenLite`

Automatically analyzes various throwProps variables (like `velocity`, `max`, `min`, and `resistance`) and creates a TweenLite instance with the appropriate duration. You can use `ThrowPropsPlugin.to()` instead of `TweenLite.to()` to create a tween - they're identical except that `ThrowPropsPlugin.to()` doesn't have a `duration` parameter (it figures it out for you) and it adds a few extra parameters to the end that can optionally be used to affect the duration.
Another key difference is that `ThrowPropsPlugin.to()` will recognize the `resistance` special property which basically controls how quickly each property's velocity decelerates (and consequently influences the duration of the tween). For example, if the initial `velocity` is 500 and the `resistance` is 300, it will decelerate much faster than if the resistance was 20. You can define a `resistance` value either for each individual property in the `throwProps` tween like this:
`ThrowPropsPlugin.to(mc, {throwProps:{x:{velocity:500, resistance:150}, y:{velocity:-300, resistance:50}}});`
OR you can define a single `resistance` value that will be used for all of the properties in that particular `throwProps` tween like this:
`ThrowPropsPlugin.to(mc, {throwProps:{x:500, y:-300, resistance:150}});
//-OR-
ThrowPropsPlugin.to(mc, {throwProps:{x:{velocity:500, max:800, min:0}, y:{velocity:-300, max:700, min:100}, resistance:150}});`
`resistance` should always be a positive value, although `velocity` can be negative. `resistance` always works against `velocity`. If no `resistance` value is found, the `ThrowPropsPlugin.defaultResistance` value will be used. The `resistance` values merely affect the duration of the tween and can be overriden by the `maxDuration` and `minDuration` parameters. Think of the `resistance` as more of a suggestion that ThrowPropsPlugin uses in its calculations rather than an absolute set-in-stone value. When there are multiple properties in one throwProps tween (like `x` and `y`) and the calculated duration for each one is different, the longer duration is always preferred in order to make things animate more smoothly.
You also may want to impose some restrictions on the tween's duration (if the user drags incredibly fast, for example, you might not want the tween to last 200 seconds). Use `maxDuration` and `minDuration` parameters for that. You can use the `overshootTolerance` parameter to set a maximum number of seconds that can be added to the tween's duration (if necessary) to accommodate temporarily overshooting the end value before smoothly returning to it at the end of the tween. This can happen in situations where the initial velocity would normally cause it to exceed the `max` or `min` values. An example of this would be in the iOS (iPhone or iPad) when you flick-scroll so quickly that the content would shoot past the end of the scroll area. Instead of jerking to a sudden stop when it reaches the edge, the content briefly glides past the max/min position and gently eases back into place. The larger the `overshootTolerance` the more leeway the tween has to temporarily shoot past the max/min if necessary.

Parameters

| `target:Object` — Target object whose properties the tween affects. This can be ANY object, not just a DisplayObject.
| `vars:Object` — An object containing the end values of the properties you're tweening, and it must also contain a `throwProps` object. For example, to create a tween that tweens `mc.x` at an initial velocity of 500 and `mc.y` at an initial velocity of -300 and applies a `resistance`of 80 and uses the `Strong.easeOut` easing equation and calls the method `tweenCompleteHandler` when it is done, the `vars` object would look like: `{throwProps:{x:500, y:-300, resistance:80}, ease:Strong.easeOut, onComplete:tweenCompleteHandler}`.``
| `maxDuration:Number` (default = `100`)`` — Maximum duration of the tween
| `minDuration:Number` (default = `0.25`)`` — Minimum duration of the tween
| `overshootTolerance:Number` (default = `1`)`` — sets a maximum number of seconds that can be added to the tween's duration (if necessary) to accommodate temporarily overshooting the end value before smoothly returning to it at the end of the tween. This can happen in situations where the initial velocity would normally cause it to exceed the `max` or `min` values. An example of this would be in the iOS (iPhone or iPad) when you flick-scroll so quickly that the content would shoot past the end of the scroll area. Instead of jerking to a sudden stop when it reaches the edge, the content briefly glides past the max/min position and gently eases back into place. The larger the `overshootTolerance` the more leeway the tween has to temporarily shoot past the max/min if necessary.

Returns

| `TweenLite` — TweenLite instance

See also

defaultResistance