From current value to new value

[amineyarman]

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.

[coderitual]

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).

[coderitual]

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.

[ctf0]

@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 ?

[coderitual]

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).

[ctf0]

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

[coderitual]

Ok got it. I will look at these props.

Two options I am considering:

• returning instance of bounty instead of cancel method. Of cource cancel 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.

[ctf0]

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.

[coderitual]

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.

[ctf0]

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)

[coderitual]

Yup. Something like that. Even first animation would need calling to. This will improve consistency and will resolve another issue I have.

[ctf0]

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() {}
}

[coderitual]

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.