Jump to content


tweening in stepped stages

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

apologies if this has already been covered somewhere, but I wonder if there's a way of tweening in stepped stages - ie. I have a dot-matrix style text area that I'd like to tween, but I'd like it to jump in 8 pixel steps.


I know there's roundProps to round to non-fractional results, but is there a way (and if not, take this as a suggestion) to specify a number that it would be rounded to?



Link to comment
Share on other sites



Yes, that's totally possible with our SteppedEase.


Here is more info in the JS Docs


On this page you will find a flash demo of SteppedEase: http://www.snorkl.tv/2011/02/five-hidden-wonders-of-tweenlite/


You will be able to achieve the same effect with js.


Let us know if you need more info or help

Link to comment
Share on other sites

I knew it must be in there somewhere; Jack thinks of everything!


Many thanks for your prompt reply Carl.

Link to comment
Share on other sites

actually, now that I've checked those links and indeed it possible to do what I want with SteppedEase, it's not exactly the same as I was asking about. to use SteppedEase to do what I want,


I need to know in advance how far I want to move - so I can then divide that by the number of pixels I want to jump to know what figure to use with SteppedEased. that's fine in most cases, but sometimes I might not know how far I'm moving, in which case I won't know what figure to use with SteppedEase.


also, because that is already an ease, I take it it can't be used with any other eases - ie. it will always be a linear step with no acceleration/deceleration - which might not always be what is required. I think a tweak of roundProps that allowed a figure other than the default 1 would be more flexible.


sorry to be so fussy!



Link to comment
Share on other sites

Thanks for the clarification on what you are trying to achieve.


I can't speak to how likely it is that we are going to make any changes to roundProps or create a new plugin for this feature. Its an interesting idea.


You mentioned that you may want to combine another ease type with this effect. Technically that is possible right now. You would just create a paused TweenMax that uses steppedEase and then tween its progress with another tween that has an ease, similar to what is being illustrated here: http://www.snorkl.tv...d-flexibillity/


Although since your tweens are going to be low-fidelity with not many positions, I'm not sure how apparent easing will be. Worth a shot.


Another option would be to just use an onUpdate callback to force your values to snap to 8px increments. Here is a really rough implementation:



but sometimes I might not know how far I'm moving


That's kind of tricky, by definition a tween needs startValues, endValues and a duration. If you don't know how long it needs to be you could:


1) create a super long and far tween at constant speed and stop it when need be

2) append a whole bunch of spaced set() calls to a really long timelinelite


here is a very rough and inflexible method that illustrates the second concept:



Just trying to give you a few ideas to think about. I understand that each of them may need some work.

  • Like 1
Link to comment
Share on other sites

sorry for my slow acknowledgement, but thanks for your ideas.


the onUpdate callback method seems to do exactly what I need, so thanks a lot for that.


I think you did a great job, given that you're having to try and second guess what was in my mind, but just to explain a little more, the fact that the effect is kind of low fidelity doesn't necessarily imply that there's not many positions. I had in mind an dot-matrix style display pretty much filling the screen width, so that gives enough positions that non-linear eases can still be seen as such.


my slightly tweaked version... http://jsfiddle.net/5zRVz/2/


thanks again!

Link to comment
Share on other sites

You're welcome, Super Fan. Glad I could get you going in a suitable direction.



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.