coderitual / bounty Goto Github PK
View Code? Open in Web Editor NEWJavascript and SVG odometer effect library with motion blur
Home Page: https://coderitual.github.io/bounty/examples/
License: MIT License
Javascript and SVG odometer effect library with motion blur
Home Page: https://coderitual.github.io/bounty/examples/
License: MIT License
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.
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,
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
There should be an update method for responsive layouts.
Minimal solution would be a destroy method.
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
.
The idea is to implement odoo as a webcomponent.
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
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.
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:
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<desc>£144,167.60</desc>
to the outer SVG to announce the correct text to screen readersFor my project I have to hide the generated SVG for screen readers and show them the correct text.
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.
const text = odoo.default({value: '£42,000,000'});
document.querySelector('.js-odoo').appendChild(text);
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).
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
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'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?
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
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?
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.
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!
I tried something like
odoo.default({
el:".spin",value:"£400" , "color" : "black", "background-color" : "green"
})
But it always shows up as white on white ...
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.
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.
We need possibility to display odoo as a "static" value, with odoo look/style & digits positioning but without animation - i.e. when value === initialValue
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
Hi,
I want to update the number of real-time ,What should I do 。。(渣渣英语,但愿你能看懂。)
Hi,
I've noted that there are some differences between Firefox and Chrome:
I've set:
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
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!
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,
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 +"
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.