CSSアニメーションと連動するコード

Lottieの再生と同時にclassを付与して、CSSのtransitionやanimationに繋げる。

CSS

.lottie {
  /* 一部省略 */
  transition: transform .5s 1.2s ease-in;
}
.lottie.go {
  transform: translateY(-100vh);
}

JavaScript

const rocket = document.querySelector('.lottie'); // Lottieの入れ物をrocketと定義

const animation = lottie.loadAnimation({
  container: rocket,
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: '/assets/lottie/rocket.json'
});

const button1 = document.querySelector(".button1"); // 発射ボタン
const button2 = document.querySelector(".button2"); // 着陸ボタン

// 発射ボタンを押したとき
button1.addEventListener('click', ()=> {
  rocket.classList.add('go');     // rocketにclassを付与
  animation.setDirection(1);      // 通常再生にする
  animation.play();               // アニメーションスタート
});

// 着陸ボタンを押したとき
button2.addEventListener('click', ()=> {
  rocket.classList.remove('go');  // rocketのclassを削除 
  animation.setDirection(-1);     // 逆再生にする
  animation.play();               // アニメーションスタート
});