- GSAP (Animation Platform)
- Getting started
- Docs
- Cage match: jQuery | CSS3
ThrowPropsPlugin – tweens that flick, toss, and slide gracefully
- Version: 12.0, Updated 2012-08-26
14:55
|
Briefly explains and demonstrates some of the features of ThrowPropsPlugin. Includes sample code.
(direct YouTube link) |
ThrowPropsPlugin is a plugin for TweenLite and TweenMax that 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 content 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 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.
Flick-scrolling example
Rotation example
Note: ThrowPropsPlugin is a membership benefit of Club GreenSock (“Shockingly Green” and corporate levels). If you’re not a member yet, you can sign up here. Once you join you’ll get access to several plugins like this which can be downloaded from your GreenSock account.
One of the fundamental problems ThrowPropsPlugin solves is when you need to start tweening something at a particular velocity but you don’t necessarily know the end value (most tweens require that you know the end value ahead of time). Another tricky part of building a tween that begins at a particular velocity and 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 ASDocs for details. The demo video covers this method in the 2nd half too.
Documentation
View the full ASDocs here.
Sample AS3 code
import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
TweenPlugin.activate([ThrowPropsPlugin]);
//simplest syntax, start tweening mc.x at 200 pixels/second and mc.y at -30 pixels/second so that they both come to a stop in exactly 5 seconds using the Strong.easeOut ease
TweenLite.to(mc, 5, {throwProps:{x:200, y:-30}, ease:Strong.easeOut});
//to define max and/or min values, use the object syntax like this:
TweenLite.to(mc, 5, {throwProps:{x:{velocity:200, min:100, max:600}, y:{velocity:-30, min:0, max:150}}, ease:Strong.easeOut});
//to have ThrowPropsPlugin automatically determine the duration based on the initial velocity and resistance, use the static to() method like so:
ThrowPropsPlugin.to(mc, {throwProps:{x:{velocity:200, min:100, max:600}, y:{velocity:-30, min:0, max:150}, resistance:50}, ease:Strong.easeOut});
FAQ
- Where can I get ThrowPropsPlugin? It isn’t in the public downloads!
ThrowPropsPlugin is a membership benefit of Club GreenSock (“Shockingly Green” and corporate levels) so it isn’t in the public downloads. If you’re not a member yet, you can sign up here. Once you join you’ll get access to several plugins like this which can be downloaded from your GreenSock account. - Is ThrowPropsPlugin only for tweening the x and y properties?
Absolutely not. You can tween ANY numeric property of ANY object. For example, you could tween mc.rotation like this:TweenLite.to(mc, 2, {throwProps:{rotation:150}, ease:Quad.easeOut});Or you can tween a custom property of a custom object like this:
TweenLite.to(myCustomObject, 2, {throwProps:{myCustomProperty:600}, ease:Back.easeOut}); - Does ThrowPropsPlugin completely automate flick-scrolling and tracking the velocity of the mouse, etc.?
Nope. The plugin was meant to be relatively small, efficient, and flexible. There are many ways you could track mouse movement, touch events, dragging, etc. so the plugin doesn’t impose a particular method on you. The example in the Plugin Explorer demonstrates one way to track the velocity of the mouse, so feel free to use that as a reference. You simply feed the velocity (and optionally other values like max, min, and resistance) to the plugin and it takes it from there. - Why would I want to use a tween to do this type of motion rather than an ENTER_FRAME or Timer that manually applies deceleration iteratively?
Using a solution that is integrated with a tweening engine like TweenLite or TweenMax allows you to do sequencing much more easily and you get better control because you can pause(), resume(), reverse(), jump to any time in the tween, use onComplete/onUpdate callbacks, change timeScale, and more. Overwrite management is built-in too. Plus most other solutions don’t give you the smooth handling of the maximum/minimum values. They are typically frame-based too, so they slow down if the frame rate drops and it can be difficult to predict exactly when the object will come to rest. - What is that BlitMask object that’s used in the interactive example and where can I get it? Is it necessary?
BlitMask isn’t necessary at all, but it can significantly improve scrolling performance. It’s just another GreenSock tool that aims to make your life easier, your apps run better, and your clients happy. See the dedicated BlitMask page for details. - Can I get the FLA from the video with the code that made the dial rotate?
Sure. You can get it here (CS4). - Can I use any ease that I want?
Technically yes, but generally only easeOut eases look good. Quad.easeOut, Cubic.easeOut, Sine.easeOut, Expo.easeOut Strong.easeOut, Back.easeOut, etc. are all good options. If you need a detailed explanation as to why other eases don’t work well, please ask in the forums or below. - What about panel-based flick-scrolling like when flicking through photos on the iPhone/iPad? Can ThrowPropsPlugin help with that?
Actually, that’s much simpler than you might think and it doesn’t require ThrowPropsPlugin. The logic is as follows:- Sense the direction of the flick movement (right or left)
- If the velocity is more than a particular (relatively low) threshold, do a simple easeOut tween to the next (or previous) panel. Maybe 0.5 seconds or so.
- If the velocity is below that threshold, just do an easeOut tween to the current panel (to snap it back into position)
I whipped together a sample set of files that demonstrates panel-based flick scrolling. Get it here. It looks like this:
- Is the API locked-down or might it change?
No changes are planned to the API right now, but this is a brand new plugin and I’m committed to making improvements and enhancements if the need arises as it gets out into the wild and folks provide feedback. So yes, there could be some changes down the road. Please feel free to submit your feedback and suggestions.
Need help?
Feel free to post your question on the forums. You’ll increase your chances of getting a prompt answer if you provide a brief explanation and include a simplified FLA file (and any class files) that clearly demonstrates the problem.
Twitter
Facebook
Digg
StumbleUpon
del.icio.us
Yahoo! Buzz
Google Bookmarks
RSS
LinkedIn
Reddit
Comments (43)
FIRST!
Another home run! I am going to try this today.
Just browsing through the AS Docs gets me pumped!
Thanks again Jack…simply awesome.
You f***ing rock! just that 
Looks like more great stuff!
Very awesome mate! Cheers!
Fantastic commitment to the TweenLite/Max projects Mr Greensock, I’m surprised you manage to get so much done (are you sure you don’t have some coding Elves hiding in your cupboards? Keep up the good work!
Great stuff as usual! You’re efforts are sincerely appreciated!
Wow, really impressive work Jack! I once spent several days mimicking the iphone scroll physics and the end result worked but was hardly reusable. This makes that process seem trivial and opens the door to so many more complex animation opportunities.
Can’t wait to mess around with it, thanks for the hard work!
Nice one- I think the best part about this new plugin is applying it for the “ios” style dragging and throwing of scrollable areas. It would be REALLY sweet if you extended this plugin with a class that would let you frame and mask an MC or text area, and automatically apply the throwprops, and generate a scrollbar when scrolling or throwing like the iphone does… Instant scrolling ios UI component. My birthday is coming up? 
Great work as usual.
This is just amazing…
I get excited when i look at your projects 
Well Done !!
Impressive really impressive.
Now I want to upgrade my membership to SG from RG. Is there an upgrade path?
Absolutely, Steve. Go ahead and purchase the “Shockingly Green” membership and then send me an e-mail request and I’ll refund $50 to cover your original “Really Green” membership. Thanks for the continued support.
I am currently doing iphone like scrollplane stuff.. u did really great, thanks for the effort!~
Very smooth as always ! Can wait to try it on away3d Objects !
An utterly great addition to -your already utterly great- package!
Thank you!
Congratulations for this new killer feature Jack !
Nice one Jack!
Thanks a lot for continuously providing us with these great features!
Thanks a lot.
R.
Awesome code block!
This looks really excellent. Do you have any performance information on iOS publish / air 2.7
We are already using greensock tweening on our iOS app and this could replace our custom enterframe scrolling which we are not happy with performance vis a vis xcode momentum scroll
mrdeli, no I don’t have performance benchmarks for how throwProps compares with other scrolling solutions like it, but I certainly optimized it as much as possible. I’d be curious to hear how it compares to your custom solution that you had implemented. Keep in mind that the vast majority of the processor load in any Flash app is graphics rendering, not ActionScript code execution. So if you have a large area of content that is scrolling and getting masked, I highly doubt ActionScript code execution accounts for even 1% of the CPU load. Do whatever you can to minimize the graphics rendering load first and foremost.
Jack!, One word -”Superb”
You continue to provide excellent and brilliant tools for the entire Flash dev community!. This is simply brilliant and would save everyone a lot of effort in many ways. I am personally working on a Multi Touch application right now, and I understand the challenge in the native ‘Flick’ gesture. Trust me, this is one of the best emulations I have ever seen.
Absolutely brilliant!.
Regards from a good friend!.
Gurtej.
I am using ThrowProps in my iOS app for scrolling. I was using Flex for a while, but the performance on Pushing and Popping views is just not there yet, so I switched back to Flash Pro and Tweenlite. Let me tell you… It ROCKS!
Jack, If you are at MAX again this year, I owe you a beer!
Rich
Thanks for doing this! Just amazing you keep providing us with awesomeness!
Brian
As usual, You absolutely perfected something I have been thinking about for quite a while. Heroic work that is truly valuable to the flash community!!!!
Is there any ability to intervene – or rather listen for an edge hit from the plug-in and calculate a trig angle and let it cont in a different direction? Like a hockey puck, or “what’s-that-Canadian-sport” Fluge or something – again a way to intervene and add or remove to velocity delta in speed (effecting the speed not controlling it) from various factors such as surface drag, or if floatin wind resistance. A lot of that is simple algebra or trig – just need the event from the plug in.
Robert, ThrowPropsPlugin isn’t intended to be a physics engine with collision detection, angle calculation, bouncing in different directions, etc. You could, of course, add an onUpdate that checks to see if the object shoots past the maximum or minimum values and then kill the tween and do whatever you want (like create another tween in the opposite direction that starts at a particular velocity), but that’s up to you. It sounds like you might be trying to use the wrong tool for the job.
Once again great program! I’m already using TweenMax and LoaderMax and I will use this ThrowProps Plugin in my next flash game to scroll between levels. Looks awesome!!
Hi Jack
Thank you for such a great plugin. It’s helping me a lot with the prototyping of mobile application software.
I have a quick query. I’ve been comparing the performance of when a user scrolls beyond the scrollable content (or when the content its most top) on an iPhone vs how the scrolling of a container is, using ThrowProps.
I’ve noticed the iPhone has a excess of about an extra 1/2 of the screen showing “emptyness”, before my finger has reached edge of the screen, e.g. starting from the top most of the screen and finishing at the most bottomest.
The user is also given the feeling of an increase in resistance, causing the scrolling to seem like it’s “tougher” to move beyond the screen’s content…
Could you give any tips on how this could be mimicked using the ThrowPropsPlugin?
Thanks Jack
Yeah, I know exactly what you mean about the increased “resistance” when you drag past the boundaries on an iPhone/iPad. That has nothing to do with ThrowPropsPlugin – it’s just the way the dragging logic is implemented. I think most people would prefer the behavior you described, so I just updated the sample code in the Plugin Explorer and the interactive example on this page to do exactly that. Enjoy!
Hey Jack
Firstly, I should have thanked you earlier for the modified version of the ThrowPropsPlugin, as described in my previous post!
So, thank you!
I’ve implemented it in my project and it’s working seamlessly.
However, I have another suggestion – which I guess would give the plugin its final touch!
Once again, as per many devices, when you scroll through content you get a thin scrollbar indicator to the right (or bottom) of the content, signifying the position of where you have scrolled to and is dynamically resized / gets “squashed” for a split second, if the user goes beyond the content’s limits.
I’m not quite sure where I’d start to implement this. Then again, I thought – “Jack might like this to be part of his plugin!”
It would be kind of neat if it there was a Boolean parameter as part of the ThrowPropsPlugin, to allow the user to show or hide this scrollbar.
Presumable this scrollbar could be calculated after the content’s height has been passed into ThrowProps?
Thanks Jack
Zayd, I can see why you’d want scrollbar functionality built into BlitMask, but I don’t have any plans to add it because not only would it bloat things (I try to keep my stuff relatively focused, efficient, and lightweight), but scrollbars can be so varied in terms of skinning/design that I’d really need to provide all sorts of hooks into it to control visual things and little pieces of functionality which would be much better modularized in a different class altogether. See what I mean? I think it can be a mistake to glob too much functionality into a single class. It can get messy fast, and prove constricting ultimately.
I’m pretty sure there are a lot of other scrollbar classes out there that might deliver what you need (although I haven’t personally done much research on which ones are good). If anyone has specific recommendations, please chime in.
Using Throwprops and Blitmask together to scroll some content that is comprised of images, and text. I would like the user to be able to click on the images to call a function to open a larger version but the Blitmask seems to have stopped all interactivity.
Any suggestions how to solve this issue?
Yep, you’re exactly right Paul – when bitmapMode is on, interactivity ceases as mentioned in the docs because…well…bitmaps can’t have interactivity. That’s part of the reason they perform so well too. But you can’t have your cake and eat it too – you can’t have outstanding performance that bitmapMode offers AND have full interactivity on all the child elements. To answer your question, though, the solution is to simply set bitmapMode to false whenever you want to enable interactivity again, and then set it to true when you need excellent scrolling performance with no interactivity.
I would like to create a scrolling glossary for an iPad app. There will be a list of words in order of A -Z.
When the list gets to Z I would like it to loop back to A again so essentially it is a seamless loop rather than having a fixed minimum Y position and maximum Y position.
Will Throwprops be suitable for this?
Well, Paul, ThrowPropsPlugin can definitely help you to do the flick-scrolling/animation, but as far as wrapping and having a seamless loop, that’s something that you might want to look at BlitMask for. I’ve done something like that in the past and it worked fabulously – I just turned on BlitMask’s “wrap” property and let ‘er rip.
How would you amend your panel example to scroll more than one panel at a time? So if the user flicked it with more force it would scroll more panels. This would be more applicable if there were a larger number of panels.
Sure, Paul, you can use ThrowPropsPlugin to calculate exactly where the flick-scroll would land (based on current velocity, ease, friction, etc.) and then run your own logic to adjust that ending spot and feed that value into the tween so that it lands EXACTLY where you want it, and it all looks perfectly fluid. Sound complicated? It’s not that bad actually. Let’s say, for example, that you have panels that are 500 pixels wide and they’re arranged starting at x:0. When the user does a flick-scroll, let’s say you use ThrowPropsPlugin to determine that it’ll land at exactly x:1349 (you’ll see code for this prediction in the example link below). You could then adjust it and round to the closest position (in this case, 1500) and set the throwProps min and max to 1500, thus forcing it to land precisely on that spot. The plugin does all the rest and makes it look natural.
Here’s a link that would probably be helpful:
http://forums.greensock.com/topic/5276-throwprops-and-stopping-at-a-target-position/page__p__17932#entry17932
And if you need to do rotational values, there’s some “gotchas” that are solved here:
http://forums.greensock.com/topic/4918-throwprops-rotation-min-and-max-values/page__view__findpost__p__16288
I hope that helps!
I have been looking for flash touch and scroll function on the website. This one is the best. However, it scrolls text only???? I want to scroll movie clips. Is that possible? Can you give me the codes to scroll movie clips? Please I need help. I don’t know much about coding. Thank you very much for excellent hard.
Gina, ThrowPropsPlugin is NOT just for text. You can use it for pretty much ANYTHING. My example just happens to use text, but you can replace that with an image, Sprite, MovieClip, or whatever. In the interactive example code, simply replace the “mc” variable with a reference to your MovieClip. It’s that simple.
If you need any further assistance, don’t hesitate to post your question(s) in the forums at http://forums.greensock.com
[...] for a commercial license or $99 for a bit more restricted one you’re the proud owner of the ThrowPropsPlugin. Butter smooth “iOS scrolling” (amongst [...]
Is it possible to have the panel slider slide movieclips instead of bitmaps
Absolutely, Adam, you can use ThrowPropsPlugin to tween any object, not just bitmaps. And BlitMask’s bitmapMode can be enabled/disabled whenever you want to toggle interactivity.
Will be JS version of this plugin?
Yes, there actually already is a JavaScript version of this plugin It’s included in “Shockingly Green” and “Business Green” memberships – http://www.greensock.com/club/
Download zip 
github 
CDN link