Javascript Anime.js中的反向动画无法正常工作

我有一个表单，允许用户注册或登录他们的帐户。我正在尝试使用anime.js从注册表单转换到登录表单（反之亦然）

最初我希望translateX属性为0，即注册，如果用户有帐户并希望登录动画，则应在translateX上转换为420

我遇到的问题是translateX的初始位置是420。我试图通过在页面加载时调用reverseAnime.play（）来解决这个问题。然而，我更希望将平移位置设置为0初始位置，并过渡到位置420

我已经包括了一个沙盒，以便更清楚地理解

经过进一步研究（谷歌搜索），我找到了一个使用旧版本anime.js（2.0.2）的解决方案。我把它应用到我的项目中，它成功了！耶！我不确定最新版本是否有bug，但使用reverse（上面的视图沙盒示例）对我来说不起作用

如果有人有更多的信息，可以告诉我我做错了什么，或者确认截至今天（10/28/20）的最新版本（3.2.1）是否存在缺陷，这也会有所帮助

// const staticPanel = document.querySelector(".panel--static");
const slidingPanel = document.querySelector(".panel--sliding");

const signupBtn = document.querySelector(".signup");
// console.log(signupBtn);
const loginBtn = document.querySelector(".login");
// console.log(loginBtn);

const signupContent = document.querySelector(".panel__content.signup");
const loginContent = document.querySelector(".panel__content.login");

let animation = anime({
  targets: slidingPanel,
  translateX: "92%",
  elasticity: 100,
  autoplay: false,
});

let animationReverse = anime({
  targets: slidingPanel,
  translateX: "92%",
  elasticity: 100,
  direction: "reverse",
  autoplay: false,
});


loginBtn.onclick = () => {
  animation.restart();
  loginContent.classList.replace("hide", "show");
  signupContent.classList.add("hide");
};

signupBtn.onclick = () => {
  animationReverse.restart();
  signupContent.classList.replace("hide", "show");
  loginContent.classList.add("hide");
};