coderitual / bounty Goto Github PK

At the moment there is a naive implementation of handling font change in SVG node. Each animation step performs additional work of converting the character width and kerning which results in performance impact. Certain API improvements, which affect running update function are also blocked by this issue eg. #40

Hi, I've noticed that on Chrome text has a strange grey border.
It appears on smaller font size and seems to disappears if you zoom the browser page. This doesn't happens on all PCs.

Here the comparison between Firefox and Chrome:

I tried something like

odoo.default({ 
  el:".spin",value:"£400" , "color" : "black", "background-color" : "green" 
})

But it always shows up as white on white ...

Hi,
is there a way to have Internet Explorer compatibility?

On IE 11 there is the following JS error:

SCRIPT438: Object doesn't support property or method 'from'
bounty.js (1,824)

Thanks

Hi Michał,

This library is very awesome, animations are smooth and they look very fluent and beautiful. I think to make it much more better it would be great if you could make the Blur and Gradient effects optional, so that if a project overall styles requires the counter to be plain and simple without those fancy effects it would be possible and there would be no need to turn into other libreries like odometer.js ...

Do you think you will enable these as options?

Mike, per our email discussion I'm creating this issue on the terrible performance of Safari (both Mac and iOS) of rendering the odometer in action.
From internet searches I believe changing the translate(X,Y) to a translate3d(X,Y,0) I think it would make safari render it with hardware acceleration and then it would look right.
Here are a couple links. It seems it might be back in Safari 14 or so that they made this change to help battery performance perhaps.
https://www.urbaninsight.com/article/improving-html5-app-performance-gpu-accelerated-css-transitions
https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela

Thanks!
Travis

Hi there!

Love Bounty, It's fantastic, I do have a small issue though that I hope you can help with?

I'm trying to run an instance of Bounty in a h1 with position absolute but everytime I run it it kicks out such errors as:

Error: <svg> attribute height: A negative value is not valid. ("-20")

And by kick out I mean a lot of errors!

I'm trying to run it as follows but it won't initialise. I have bounty elsewhere running fine so I'm wondering if it's to do with the size and positioning of the target element? (Do I need to put it in a child)?

bounty.default({
					el: 'h1.Raised',
					value: '£123,456.00',
					lineHeight: 0,
				});

Thanks!

There should be an update method for responsive layouts.
Minimal solution would be a destroy method.

It was long time since dev dependencies, and especially webpack was updated. I think that the version used in repository might not work in every environment nowadays. Let's upgrade it.

When using proportional font style, displayed number has a strange kerning effect (especially "1" between other chars), because each digit is left aligned in each roulette.

I think that aligning them to center of the roulette should improve look & feel.

Tested on Google Chrome 72.0.3617.0 on macOS High Sierra 10.13.6. There are two parts of this problem:

• You can't select a whole number
• When you will select numbers while odometer goes down, it can't be unselected again.

Hi,
I've noticed that if you use "initialValue" option on Firefox, sometimes some digits disappears. Here a test:

https://codepen.io/anon/pen/ZROMgd

bounty.default({ el: '.js-bounty', value: '£40,000,000', initialValue: '£10,000,000' })

The "4" of "£40,000,000" disappears at the end of the animation.

First of all, thanks for a very cool library!

I'm trying to recreate this

but I'm not sure if it's possible to add a background to each digit?

Hi,
I've noted that there are some differences between Firefox and Chrome:

CHROME:

FIREFOX:

I've set:

• text-shadow: 3px 3px 11px rgba(255, 0, 0, 1);
• letterSpacing: 10

As you can see, the shadow is cropped on non-digits characters (€) on Chrome only and on the last character on both Firefox and Chrome.
Is there a way to have the same behavior between browsers and between letters and digits?

Thanks!
Francesco

We need possibility to display odoo as a "static" value, with odoo look/style & digits positioning but without animation - i.e. when value === initialValue

let's say we have 8 and we go up to 100,
now if you tried to go back to a one digit number ex. 8 we will end up with 008.

Hi there!

HUGE fan of this script and use it in a lot of my projects, It's fab!

I have a slight issue with rendering on iOS, The colour of the font appears pale, As if it were semi transparent. I'm using this to init bounty;

bounty.default({ el: '.RevivedRev h1', value: '$' + $('.RevivedRev h1').attr('data-rev'), initialValue: '$0.00', lineHeight: 1, animationDelay: 1000, letterSpacing: 0.1, });

Is this a potential issue with a recent rendering change of svg in iOS? Can offer screenshots of issue if needed.

Cheers!

Hi,
I search how to make rotation occurs up, because now chars go to down.
When inverting from & to with 0 & targetDistance, the rotation go to up. This is what I want.
But the digits are inverted too :( and the rotation ends by 0…

I suppose things have to be modified in transition.js but it's painfull for me. Can you help please ?!

Regards

The idea is to implement odoo as a webcomponent.

It would be great to give ability to import your library as ES6 module (without transpilation) in projects written in ES6 (there is possiblity to import in such way with rollup).

Only one additional key in package.json is needed.

Hello,

Great tool you built here! I'm currently having a problem with styling the letter spacing. I can style anything else easily: font-family, font-size, etc. But, letter-spacing values don't affect the output at all: 3, -10px, normal. Any help would be appreciated. Please let me know if you need any more details. Thanks!

chrome is very dump when it comes to svg, as having more than 15 or 20 svg on the same page could simply render a very unpleasant experience.

so as the package atm uses svg + blurring , masking, loop the numbers list at least a couple of times b4 showing the final value, it means that any other animation that happens at the same time will hang a bit.

so we need to find a way to optimize the svg animation to minimize the jerking effect that affects chrome, some solutions could be

• shorten the animation duration
• disable the blurring #29
• use font instead "one way or another will render badly at some point"
• have a maximum value for looping, ex.
  • if the current is 5 and the next value is 100, don't play the slot machine effect and go straight to it. #45
  • if the difference between current and next were something like 10 digits or less, then make the loop to create the big list illusion.

Hi,

This is a really nice job, I've been using odometer.js util now but I switched to this one, I have a request and I think lots of people will appreciate it if you fulfill it and that is to include text support too, I mean the odometer effect for texts too like from "000000" to "100 thousand +"

On the part of the element generated with lib there are no shadows. It occurs on iOS mobile devices with retina display. Its especially visible on iPads. Tested on iPad 3, iPad Pro, iPhone 6 Plus.

API could be more flexible in terms of README.md example:

odoo.default({ el: '.js-odoo', value: '£42,000,000' });

odoo could just return newly created node with SVG instead of mounting it directly to global DOM, so you could use it for example in node.js env.
Also, there could be an additional helper to preserve previous functionality.

example

const text = odoo.default({value: '£42,000,000'});
document.querySelector('.js-odoo').appendChild(text);

on chrome / FF works correctly, on safari this is what it looks like

Hi, I was looking for a library like this and test it out.

I found out, it doesn't handle screen readers. NVDA with Windows would announce the following text for the basic example:

bounty
£  0  1  2  3  4  5  6  7  8  9  0  0  1  2  3  4  5  6  7  8  9  0  0  1  2  3  4  5  6  7  8  9  0  ,  0  1  2  3  4  5  6  7  8  9  0  0  1  2  3  4  5  6  7  8  9  0  0  1  2  3  4  5  6  7  8  9  0  .  0  1  2  3  4  5  6  7  8  9  0  0  1  2  3  4  5  6  7  8  9  0

Possible solution for this:

• add aria-hidden="true" to the inner <svg mask="..."> or wrap all in a single <g aria-hidden="true"> to hide the loose <text>s for screen readers
• add the example case add a <desc>£144,167.60</desc> to the outer SVG to announce the correct text to screen readers

For my project I have to hide the generated SVG for screen readers and show them the correct text.

Hi, I've craeted a Pen on codepen.io; here it is: http://codepen.io/ershad989/pen/WGwjqj

As you can see I've defined 3 odometers but only of them shows up!!
The other problem is that if one of the numbers has 3 digits and the other one has 4 or more digits only 3 of them is visible!!

So here we have three numbers, 1st one has 3 digits, 2nd one has 4 digits and the 3rd one has 5 digits.
when I run the function only three digits shows up for just two of the numbers.

How can I solve this problem?

Is there a way that I can change the animation of the numbers/letters from left to right? Because currently it is now from right to left. Thanks in advance

I get this error:
odoo.js:1 Uncaught TypeError: Cannot read property 'setAttribute' of null
at e.default (http://localhost:9001/js/plugins/odoo.js:1:5038)
at step (http://localhost:9001/js/plugins/odoo.js:1:4271)
at Object.b as update
at http://localhost:9001/js/plugins/odoo.js:1:4622
at Array.forEach (native)
at q (http://localhost:9001/js/plugins/odoo.js:1:4593)
at a (http://localhost:9001/js/plugins/odoo.js:1:803)

bounty({
  el: '.number',
  value: 1e6,
  duration: 10e3,
  animationDelay: 3e3,
  letterAnimationDelay: 500
});

When animation starts, it lasts 3 seconds (as by default). It doesn't seem that duration option works.
Tested in Chrome.

Hi，
I want to update the number of real-time ，What should I do 。。（渣渣英语，但愿你能看懂。）

so lets say the current number is 7 and the new value is 5 how to make the animation only move from 7 > 5 without the long list animation.

Hello,

That's an amazing tool and that's exactly what I was looking for. Though I have a question.
Is there a way to make it start from a value, for example 2016, instead of having it starting from 0? I'm trying to make some kind of timeline where each slide starts from a value that is incremented in each slide.