Anime: Problem with starting animation

Created on 6 Oct 2017 · 8Comments · Source: juliangarnier/anime

I think there is some problem.

Problem occurs when I dynamically set the top and left style of some element then if I animate it with anime (the top value), it starts with the wrong value.

here's my sample code:

<div id="testme" style="
    top: 1px;
    left: 1px;
    width: 100px;
    height: 100px;
    background-color: #000;
    position: fixed;
"></div>


document.getElementById('testme').style.top = '1vh';
anime({
    targets: '#testme',
    delay: 2000,
    top: {
        value: '+=50vh',
        duration: 2000
    }
});

without the anime function, #testme is positioned at the place I want it to be, but with the anime function, the top value was not the same. this only happens both for vh and vw units

bug

Source

LXSMNSYC

All 8 comments

You need to tell anime which initial value to animate from using the array syntax.

In your example, it would be something like this: https://codepen.io/alexchantastic/pen/VMQbaZ

alexchantastic on 6 Oct 2017

👍1

thank you for that response. It will help me solve my anime problem. though still it is weird how it changes the starting position.

LXSMNSYC on 7 Oct 2017

👍1

I just learned that the value was just "initial" and "final", will the value accept increment/decrement operators?

LXSMNSYC on 7 Oct 2017

Yes, +=, -=, and *= should work in this instance.

However, looking back at your first issue, it might actually be a bug with how anime handles vh units. Specifying a px value in your original example seems to work fine since anime should grab the original computed style.

alexchantastic on 8 Oct 2017

that was my first animation process: get the passed vh and vw unit, convert it into px then pass it to anime. the problem was that the elements aren't responsive ( I was trying to retain its "responsive-ness")

LXSMNSYC on 8 Oct 2017

It's mandatory to set inline style for transforms if the start value is not the default?
https://jsfiddle.net/ad1o7fdn/3/

OPTIONAL SOLUTION:
Its possible to set initial value: http://animejs.com/documentation/#specificInitialValue