GSAPと連動するコード

Lottie-webライブラリと、GSAPライブラリを読み込む（head内でも可）。

<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

Lottieアニメーションを定義する。

const bycicle = document.querySelector('.lottie');

const lottieAnimation = lottie.loadAnimation({
  container: bycicle,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/assets/lottie/bycicle.json'
});

GSAPでアニメーションを作成する。
アニメーション途中、callでLottieアニメーションを変更する。

// スタートボタンを押したとき
button.addEventListener('click', ()=> {
  // GSAPでタイムラインアニメーションを作成
  gsap.timeline({ repeat: -1, repeatDelay: 0 })
    .call(() => {
      lottieAnimation.setDirection(1);  // Lottieを通常再生方向にする
      lottieAnimation.setSpeed(2);      // Lottieを2倍速にする
    })
    .to(bycicle, { x: window.innerWidth - bycicle.offsetWidth, duration: 3, ease: "bounce" })
    .call(() => {
      lottieAnimation.setDirection(-1); // Lottieを逆再生方向にする
      lottieAnimation.setSpeed(1);      // Lottieを通常速度にする
    })
    .to(bycicle, { x: 0, duration: 4, ease: "power4.inOut" });
});