Anime.js Timeline动画问题：左右字母无法同步展示

问题原因 #

你当前的代码通过两个.add()方法依次添加动画，Anime.js Timeline默认会按添加顺序执行动画。即便设置了offset: "-=60"，也只是让第二个动画在第一个动画结束前60ms启动，并非完全同步。

解决方案 #

有两种简单方式实现同步播放：

方案1：合并为单个动画对象

把两个目标选择器放在同一个.add()里，通过回调函数为不同元素设置对应位移参数，动画会同时作用于两个元素：

anime
  .timeline()
  .add({
    targets: [".ml5 .letters-left", ".ml5 .letters-right"],
    opacity: [0, 1],
    // 根据元素类名动态返回位移方向
    translateX: (el) => el.classList.contains('letters-left') ? ["-100%", 0] : ["100%", 0],
    easing: "easeOutExpo",
    duration: 600
  });

方案2：设置第二个动画的offset为0

给第二个动画的offset设为0，表示从Timeline的起始点开始执行，和第一个动画同步启动：

anime
  .timeline()
  .add({
    targets: ".ml5 .letters-left",
    opacity: [0, 1],
    translateX: ["-100%", 0],
    easing: "easeOutExpo",
    duration: 600
  })
  .add({
    targets: ".ml5 .letters-right",
    opacity: [0, 1],
    translateX: ["100%", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: 0 // 与第一个动画同时启动
  });

内容的提问来源于stack exchange，提问作者Dhruv Tanwani