Anime: Flicker when animating translateX

[jlongster]

I'm in latest Chrome, and this is what I see when I try to animate translateX: http://jlongster.com/s/flicker-anime.mov

This is the code I'm using to animate it, very simple:

  const elements = [];
  let x = 0;

  function animateLeft() {
    x -= 250;
    anime({
      targets: elements,
      translateX: x
    });
  }

  function animateRight() {
    x += 250;
    anime({
      targets: elements,
      translateX: x
    });
  }

There are buttons off screen that I'm pressing to move it back and forth. Any idea?

[juliangarnier]

I'm in latest Chrome, and this is what I see when I try to animate translateX: http://jlongster.com/s/flicker-anime.mov

You have to make sure the elements translateX values are not animated when creating a new animation, like this:

  const elements = [];
  let x = 0;

  function animateLeft() {
    anime.remove(elements);
    x -= 250;
    anime({
      targets: elements,
      translateX: x
    });
  }

  function animateRight() {
    anime.remove(elements);
    x += 250;
    anime({
      targets: elements,
      translateX: x
    });
  }

[garrettmaring]

When using 2.2.0, this actually made the difference between a flicker and not for me. remove seems to be pretty important when re-running animations.