GSAPと連動するコード

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.11.0/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>

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

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

const animation = lottie.loadAnimation({
  container: bycicle,
  renderer: 'svg',
  loop: true,
  autoplay: false,
  path: 'https://assets7.lottiefiles.com/packages/lf20_Nlkimv.json'
});

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

const button1 = document.querySelector(".button1");

// スタートボタンを押したとき
button1.addEventListener('click', ()=> {
  const windowWidth = window.innerWidth;  // ブラウザの幅を取得
  animation.play(); // Lottieを再生

  // GSAPでタイムラインアニメーションを作成
  gsap.timeline({ repeat: -1, repeatDelay: 0 })
    .call(() => {
      animation.setDirection(1);  // Lottieを通常再生方向にする
      animation.setSpeed(2);      // Lottieを2倍速にする
    })
    .to(bycicle, { x: windowWidth - bycicle.offsetWidth, duration: 3, ease: "bounce" })
    .call(() => {
      animation.setDirection(-1); // Lottieを逆再生方向にする
      animation.setSpeed(1);      // Lottieを通常速度にする
    })
    .to(bycicle, { x: 0, duration: 4, ease: "power4.inOut" });
});