Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
katerlouis

RoundProps with optional decimal count?

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

To my knowledge you can only have perfectly round numbers with the RoudPropsPlugin.

 

It would be great if you could pass an object, where you can tell GSAP how many decimals you want to round to.

 

What do you think?

 

TweenMax.to(".numberCountUp", 1, { x: 0, y: 0, innerHTML: 0 }, { x: 200, y: 200, innerHTML: $(".numberCountUp").text(), roundProps: [
		{ prop: "innerHtml", decimals: 2 },
  		{ prop: "x", decimals: 0 },
  		"y" // shortcut if you wanna have no decimals at all, which is the normal behaviour
	]
});

 

  • Like 1
Link to comment
Share on other sites

Hi @kreativzirkel :)

 

RoundPropsPlugin is just a specific implementation of the ModifiersPlugin. So you can use that to achieve what you're looking for.

 

let decimals = 2,
    mod = Math.pow(10, decimals);

TweenMax.fromTo(".numberCountUp", 1, { x: 0, y: 0, innerHTML: 0 }, { x: 200, y: 200, innerHTML: $(".numberCountUp").text(),
	modifiers: { innerHTML:function(i) { return Math.round(i * mod) / mod; } }
});
//replaced .to() with .fromTo(), I assume this was a small mistake

 

(Now, if you're saying this should be part of RoundPropsPlugins, it's not my place to answer :D )

  • Like 5
Link to comment
Share on other sites

TIL you can animate innerHTML. Makes sense, just never thought about it.

 

Here's that in a partial function. Passing in a negative number rounds to whole numbers.

 

See the Pen XqNzXG by osublake (@osublake) on CodePen

 

 

  • Like 6
Link to comment
Share on other sites

uh-oh, @OSUblake learned something new.

 

Everyone save your work -- we now have to reboot the Matrix.

  • Like 1
  • Haha 3
Link to comment
Share on other sites

On 27.4.2018 at 5:13 PM, OSUblake said:

TIL you can animate innerHTML. Makes sense, just never thought about it.

 

I.. practically.. taught.. BLAKE (!) something? :OOO 

Where's my award? I'm freeing up the whole wall for that certificate :D

 

Jokes aside: 

TIL that RoundProps is done with the modifiers Plugin 8)

Both of your solutions work – but you know me by now: My suggestion would be way more comfortable for users (in my opinion at least :D). 

 

Even if you are a blake-esc GSAPper, coming up with a solution for specific number of decimals is distracting you from the main goal.

This is (arguably) an unnecessary detour. I'm all for "help the user concentrate on what they want to do, not on the how"

 

My use case doesn't seem farfetched to me.

 

So who do I have to get on his nerves until this gets implemented?

8)

  • Haha 1
Link to comment
Share on other sites

9 hours ago, kreativzirkel said:

So who do I have to get on his nerves until this gets implemented?

 

The people with the green capes. Generally, you don't need decimal precision when tweening, but that's not to say that there aren't use cases for it. I mean, it is called the RoundPropsPlugin, so it wouldn't be too crazy if it handled rounding precision to some degree.

 

Note that there are edge cases where rounding like in the examples above will fail, but they are edge cases, and probably not worth the effort to fix. There are some workarounds in this article.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round

  • Like 1
Link to comment
Share on other sites

Waiting at the Elders to speak their Wisdom 8)

Link to comment
Share on other sites

Hm, how about if roundProps could accept an object and for each property, you define a number that's the smallest gap, like:

roundProps: {
  x: 0.1, //round to the closest tenth (0, 0.1, 0.2, 0.3, etc.) 
  y: 5, //round to the closest 5 (0, 5, 10, 15, etc.) 
  rotation: 45 //round to the closest 45 (0, 45, 90, 135, etc.)
}

 

Do you think that's intuitive? 

 

Here's an updated TweenMax with this functionality embedded (note: it required some tweaks to CSSPlugin too, so this wouldn't be backwards compatible for CSS properties): https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

Is that the kind of thing you're looking for? Does it work well for you? 

  • Like 4
Link to comment
Share on other sites

I think this is super good, personally. Best implementation of this I can think of – to the point where if it was up to me and I didn't need the library to keep working for 70 bazillion websites, I'd deprecate the current string grammar:)

  • Like 2
Link to comment
Share on other sites

was messing around running some tests. 

 

Let me know if this illustrates the features clearly

 

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

 

 

Feel free to change the values

  • Like 4
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.
×