translate property with relative percentage do not work

[shirohana]

Hello,

As title, here's my code:

anime({
  targets: el,
  translateX: '-=100%'  // <- It became to '-100px' in fact
})

Is it a bug or expected behavior?

[juliangarnier]

Thanks for pointing this.
Fixed in next release!

[syropian]

This doesn't seem to be working for me in the latest version. If I have an element with like so:

.my-el {
  transform: translateY(20%);
}

and do something like

anime({
  targets: ".my-el",
  translateY: "-=5%"
})

i expect it to have a translateY of 15%, but instead it sets it to translateY(-5%)

[trych]

I have the same problem.

.my-el {
  transform: translateX(-40%);
}

anime({
  targets: ".my-el",
  translateX: "-=60%"
})

Target starts animating at translateX(0) and translates to translate(-60%) instead of going from translate(-40%) to translate(-100%) as expected. Is this something that broke in recent releases?

Edit: Btw, for consecutive calls, it seems to work correctly. So somehow anime.js seems to mess up reading the initial value under certain circumstances. After that it works.

@syropian did you ever get this to work?

[aderchox]

It's not working for me either. Here's a (an ugly) workaround I'll share for future readers until this gets fixed (hopefully).

Just specify which values are going to be animated (e.g., the translateX value) and then just add its initial value as a variable on the root element, then get and set it with your anime.js just as you could target any other JavaScript variables (i.e.: link). I tried this and it works.

[stephen-97]

Still not working for me too. @trych
Thank you for the tip @aderchox