Comments (17)
Ok got it. I will look at these props.
Two options I am considering:
- returning instance of bounty instead of
cancel
method. Of courcecancel
will be a part of the returned object. - internal list of all bounty instances with DOM marker. Executing main function on the node where bounty has been previously applied would result in working on that instance instead of creating a new one. The same approach react uses but implementation without a weak maps might lead to memory leaks.
from bounty.
@coderitual Thank you, I've tried it and work smoothly ... :D
from bounty.
Hi, there is no such functionality at the moment.
As you can see the library accepts value
parameter as a template from which all numbers are taken. The latter are animated.
Also support different length of string in to
and from
could be tricky.
{
from: 'Some text 1234',
to: 'Other text 55'
}
However, this is just a matter of consistent API and could be introduced in one of the next releases as soon as I find clean solution for this. Maybe some contract between to
and from
could be applied to resolve this (eg only numbers can differ).
from bounty.
Hello, from now on you can use initialValue
. It is no comprehensive from
to
yet, but for your case should be enough. Sorry for late answer.
from bounty.
@coderitual am using bounty inside vue & am trying to animate the number each time it changes inside the watch()
, is there a way to update the numbers in bounty without re-init each time ?
from bounty.
This is WIP at the moment but I will put the high priority on this. Do you have something against webcomponents? I am considering API and WC would make it easier. I know that using them on prod might be a bit tricky though (es5 adapter).
from bounty.
no not really, but actually the vue component was very easy to make ,ex
<template>
<div/>
</template>
<script>
import bounty from 'bounty'
export default {
props: ['value'],
mounted() {
this.init(this.value, 0)
},
methods: {
init(val, old) {
bounty({
el: this.$el,
value: val,
initialValue: old,
lineHeight: 1,
letterSpacing: 1,
animationDelay: 100,
letterAnimationDelay: 100
})
}
},
watch: {
value(val, oldVal) {
setTimeout(() => {
this.init(val, oldVal || 0)
}, 100)
}
},
render() {}
}
</script>
the setTimeout
is more of a simple debounce
<bounty :value="100"></bounty>
btw i think animationDelay
& letterAnimationDelay
have a minimum, because setting them to 1
doesnt take effect
from bounty.
we can also add another method pause()
which stops the animation mid-way.
this could be used when the values changes while the animation is still going.
from bounty.
I think we ca go with 1 option. To consider:
General idea is as follows: To avoid 3 parameters regarding value (initial, value, old) we can change api to allow initial only during creation. After that animation won't start until calling to
function. Thanks to that another transitions would be nothing but calling to
.
from bounty.
good one, so initial will get the animation to play and stop, then for any updates it would be as easy as bounty.to(newValue)
from bounty.
Yup. Something like that. Even first animation would need calling to
. This will improve consistency and will resolve another issue I have.
from bounty.
mmmm, in that case the bounty instance will be mostly used for options.
and value / initialValue
will be removed.
initialValue will default to 0 , but from next time on it will take the old value ex
// initialValue = 0
bounty.to(100)
// animate & on end set initialValue = 100
now you always get a smooth animation from the current to whatever the new value is.
i honestly like this way better so the final usage would be something like
export default {
props: ['value'], // ex. 100
data() {
return {
lib: null
};
},
mounted() {
this.lib = bounty({
el: this.$el,
lineHeight: 1,
letterSpacing: 1,
animationDelay: 100,
letterAnimationDelay: 100
})
this.lib.to(this.value) // animate from 0 to 100
},
watch: {
value(val) {
// ex.200
this.lib.to(val) // animate from 100 to 200
}
},
render() {}
}
from bounty.
in that case the bounty instance will be mostly used for options.
That's correct. I think we are on the same page. I will try to create some POC before the end of the week.
from bounty.
Hello there,
Can I use bounty multiply times in one page and set each digit value individually into new value?
from bounty.
Hi @flowsandbits. Yes, you can create multiple instances and control them individually. Each call bounty(...)
creates new object on el
DOM node. This api is not perfect and it's a subject to change.
from bounty.
@coderitual Was the from/to functionality ever added?
I really like the look of this one, but if it can't do from/to, are there alternatives available?
from bounty.
@orrd Only partially by initValue
option.
from bounty.
Related Issues (20)
- how to animate the number change without the slot machine effect ? HOT 5
- broken on safari HOT 11
- optimize svg loading "especially for chrome" HOT 6
- remove prefixed 0s HOT 2
- SVG Attribute heights HOT 4
- "initialValue" to "value" does't work well on Firefox HOT 8
- Provide unminified es5 version of library HOT 1
- Letter spacing and text-shadow on Chrome/Firefox HOT 13
- Eplorer compatibility HOT 3
- Text rendering in Chrome HOT 3
- Problem with selection HOT 1
- Pale text rendering in iOS HOT 8
- Duration doesn't seem to work HOT 2
- Make the text animation from left to right HOT 1
- Update and or destroy method HOT 1
- Accessibility HOT 1
- Letter Spacing doesn't seem to work HOT 1
- Background for each digit?
- Performance on Safari is very slow, barely works HOT 6
- Upgrade to the newest webpack
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bounty.