Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extra 0 added at the end of it keyframe innerHTML #710

Closed
DhruvaSambrani opened this issue Jul 16, 2020 · 1 comment
Closed

Extra 0 added at the end of it keyframe innerHTML #710

DhruvaSambrani opened this issue Jul 16, 2020 · 1 comment

Comments

@DhruvaSambrani
Copy link

Describe the bug
When a keyframe animation is used by updating innerHTML of a div by some text

To Reproduce
Steps to reproduce the behavior:

anime({
    targets: '.landing-name',
    keyframes: [
        { innerHTML: "a" },
        { innerHTML: "b" },
        { innerHTML: "c" },
        { innerHTML: "d" },
        { innerHTML: "e" },
        { innerHTML: "f" },
    ],
    duration: 3000,
    easing: 'easeInOutSine',
    update: function (anim) {
        var obj = document.getElementsByClassName('landing-name')[0]
        obj.innerHTML = obj.innerHTML.slice(0, obj.innerHTML.length - 2)
    }
}).play()

Expected behavior
Animation moving from a to f

Screenshots
image
image

Desktop (please complete the following information):

  • OS: Win 10
  • Browser: Vivaldi
  • Version: 3.1.1929.45

Smartphone (please complete the following information):
Unchecked

Additional context
I'm using the #master anime.min.js downloaded and linked to html using <script>
This can be circumvented by simply adding an update function to set innerHTML = innerHTML.splice(0, innerHTML.length-2)

@juliangarnier
Copy link
Owner

Anime.js was designed to animate numerical values, not text.
So hard to tell why the 0 appears in your example without a proper example, but it looks like a fallback to 0 when no numerical values are provided.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants