RoundProps with optional decimal count?

[katerlouis]

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
	]
});

 

[Acccent]

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  )

[OSUblake]

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.

 

 

[PointC]

uh-oh, @OSUblake learned something new.

 

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

[katerlouis]

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

 

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)

[OSUblake]

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

[katerlouis]

Waiting at the Elders to speak their Wisdom 8)

[GreenSock]

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? 

[Acccent]

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

[Carl]

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