Jump to content
Search Community

How to set stepped ease to output integers only and only when value changes?

Friebel test
Moderator Tag

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

I want to change an integer value from 0 to a certain number of steps in a certain amount of time. So I figured why not use the stepped ease for this.

To my surprise the onUpdate event triggers even if the value didn't change. That's a lot of times while nothing is changing. Is there a way to only let onUpdate trigger.. uh... when the value really updates?


The other thing is I want to only output integer values. Ofcoarse I can round, floor or ceil a value, but is there a build in way in steppedEase to only output integer values perhaps?


Thanks in advance guys! Love greensock!!

Link to comment
Share on other sites

onUpdate gets called on every frame, I didn't find anything in docs that will limit the onUpdate calls. For integer, you can use roundProps property. Check the following demo.


See the Pen vdMpRQ?editors=0010 by Sahil89 (@Sahil89) on CodePen

If you don't want to bother with creating additional variable etc, then you can use modifiers plugin. Though now you will have to round values yourself.

RoundPropsPlugin taps into the same mechanism internally as ModifiersPlugin (to maximize efficiency, minimize memory, and keep kb down). Think of a roundProps tween as just a shortcut that creates a modifier that applies Math.round(), thus you cannot do BOTH roundProps and a modifier on the same property. It's easy to get that functionality, though, by just doing Math.round() inside the modifier function.


But it is basically same thing, whether gsap does it or you do it.

See the Pen GQLyBL?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 3
Link to comment
Share on other sites

Thanks @Sahil and @Acccent for your quick reactions. I didn't know about 'roundprops' property, niceone to know and that helps! For the updating part I guess it has no use keep using a stepped ease for this tween and so I'll better change it to linear then and just check if the value has changed to the next integer value. Thanks guys

  • Like 1
Link to comment
Share on other sites

6 hours ago, Sahil said:

onUpdate gets called on every frame, I didn't find anything in docs that will limit the onUpdate calls


It actually gets called whenever an animation's time updates. Some might think it'd be weird if the playhead moves but onUpdate doesn't fire (even if the ease dictates that the animated values don't change on every update). See what I mean? 


If you want to call that function as few times as possible, here's another approach: 

See the Pen e648a3a3fe3f22e77426210361d5f73a by GreenSock (@GreenSock) on CodePen


I just whipped together a function that you can reuse and feed in various config values to get the results you want. Does that help? 

  • Like 4
Link to comment
Share on other sites

I get your point about the update events @GreenSock Jack and I agree to the why. It's easy to check if a value has changed ourselves and 99.9% of my usescases I don't need to, since most values are floats. This was the first in years. The function you put together looks very useful, thanks!

You guys keep delivering great service and for so long, amazing! Keep up the great work!

  • Like 1
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.
  • Create New...