Functions with number values only transform one decimal

[nicklassandell]

For example the scale function.

        const anim = new Motus.Animation({
            $el: this.$refs.startBg,
            startPoint: 0,
            endPoint: 500,
            keyframes: {
                100: {
                    scale: [1.3]
                }
            }
        });

        Motus.addAnimation(anim);

It will only increment the decimal by .1 each step, which results in an incredibly stuttery animation. It would be better if it would have 4-5 decimals (it would then animate 1.0001 and not skip the steps between 1.0-1.1).

I'm also encountering issues with other functions. The translateX seems to do nothing at all while the translate function works sometimes. I see a lot of potential in the library but at the moment I am afraid to use it for production because there is a lot of things not working, and there doesn't seem to be much happening in the repo.

I would advice you to go over the transform functions again and hunt down the bugs.

[alexcambose]

Thanks a lot for your feedback and suggestions.

[nateplusplus]

I also ran into this problem with scale animations.

In case it's of any help to others, as a temporary workaround, I've added width and height to my keyframes to dramatically reduce the size of the element, which allows me to scale by larger numbers. (Note, this was easy for me to do since I'm working with a pure HTML/CSS circle).

For example, the desired effect was scaling .6 to 1, but instead I did the following:

keyframes: [
    {
        width: 20,
        height: 20,
        scale: [18]
    },
    {
        width: 20,
        height: 20,
        scale: [27]
    }
]

@alexcambose I would love to pitch in and help you resolve this if you need a hand.