在容器中的固定位置滚动乐透动画，直到乐透完成，然后相对

我正在尝试从这个网站复制滚动功能（视频和文本），但我的视频是一个长乐透文件。

我使用以下框架：Nextjs、React、Tailwind

多次尝试失败后出现以下代码。我无法固定乐透，让它看起来像一个连续的动画。当位置粘滞/固定时，由于某种原因，它不会在滚动上设置动画。非常感谢你的帮助。非常感谢。

The code below is after many failed attempts. I'm unable to keep the lottie fixed and make it look like one continuous animation. When the position is sticky/fixed it isn't animated on scroll for some reason. Would really appreciate some help. Thank you.

`import Head from 'next/head'
import backgroundImage from '@/images/background-faqs.jpg'
import Image from 'next/future/image'

import { CallToAction } from '@/components/CallToAction'
import { Faqs } from '@/components/Faqs'
import { Footer } from '@/components/Footer'
import { Header } from '@/components/Header'
import { Hero } from '@/components/Hero'
import { Pricing } from '@/components/Pricing'
import { PrimaryFeatures } from '@/components/PrimaryFeatures'
import { SecondaryFeatures } from '@/components/SecondaryFeatures'
import { testimonials } from '@/components/testimonials'
import React, { useState } from 'react'

import { useLottie, useLottieInteractivity } from 'lottie-react'
import likeButton from '../images/lottie.json'

const options = {
  animationData: likeButton,
}

const LottieAnimation = () => {
  const lottieObj = useLottie(options)
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: 'scroll',
    container: 'lottie_container',
    actions: [
      {
        visibility: [0, 0.3],
        type: 'stop',
        frames: [0],
      },
      {
        visibility: [0.3, 0.7],
        type: 'seek',
        frames: [0, 100],
      },
      {
        visibility: [0.7, 1.0],
        type: 'stop',
        frames: [100],
      },
    ],
  })

  return Animation
}

const LottieAnimation2 = () => {
  const lottieObj = useLottie(options)
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: 'scroll',
    container: 'lottie_container',
    actions: [
      {
        visibility: [0, 0.3],
        type: 'stop',
        frames: [100],
      },
      {
        visibility: [0.3, 0.7],
        type: 'seek',
        frames: [100, 107],
      },
      {
        visibility: [0.7, 1.0],
        type: 'stop',
        frames: [107],
      },
    ],
  })

  return Animation
}

const LottieAnimation3 = () => {
  const lottieObj = useLottie(options)
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: 'scroll',
    container: 'lottie_container',
    actions: [
      {
        visibility: [0, 0.3],
        type: 'stop',
        frames: [107],
      },
      {
        visibility: [0.4, 0.6],
        type: 'seek',
        frames: [107, 115],
      },
      {
        visibility: [0.7, 1.0],
        type: 'stop',
        frames: [115],
      },
    ],
  })

  return Animation
}

const LottieAnimation4 = () => {
  const lottieObj = useLottie(options)
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: 'scroll',
    container: 'lottie_container',
    actions: [
      {
        visibility: [0, 0.3],
        type: 'stop',
        frames: [0],
      },
      {
        visibility: [0.4, 0.6],
        type: 'seek',
        frames: [0, 100],
      },
      {
        visibility: [0.7, 1.0],
        type: 'seek',
        frames: [100, 0],
      },
    ],
  })

  return Animation
}

const LottieAnimation5 = () => {
  const lottieObj = useLottie(options)
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: 'scroll',
    container: 'lottie_container',
    actions: [
      {
        visibility: [0, 0.3],
        type: 'stop',
        frames: [0],
      },
      {
        visibility: [0.4, 0.6],
        type: 'seek',
        frames: [0, 100],
      },
      {
        visibility: [0.7, 1.0],
        type: 'seek',
        frames: [100, 0],
      },
    ],
  })

  return Animation
}

export default function Home() {
  return (
    <>
      <div class="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]">
        <svg
          class="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
          viewBox="0 0 1155 678"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)"
            fill-opacity=".25"
            d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
          />
          <defs>
            <linearGradient
              id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533"
              x1="1155.49"
              x2="-78.208"
              y1=".177"
              y2="474.645"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#9089FC"></stop>
              <stop offset="1" stop-color="#FF80B5"></stop>
            </linearGradient>
          </defs>
        </svg>
      </div>
      <Head>
        <title>Machinery Analytics</title>
        <meta name="description" content="need to fill" />
      </Head>
      <Header />
      <main>
        <div>
          <Hero />
          <div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]">
            <svg
              class="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]"
              viewBox="0 0 1155 678"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill="url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)"
                fill-opacity=".3"
                d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
              />
              <defs>
                <linearGradient
                  id="ecb5b0c9-546c-4772-8c71-4d3f06d544bc"
                  x1="1155.49"
                  x2="-78.208"
                  y1=".177"
                  y2="474.645"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#9089FC"></stop>
                  <stop offset="1" stop-color="#FF80B5"></stop>
                </linearGradient>
              </defs>
            </svg>
          </div>
        </div>

        <div id="lottie_container" class="flex scroll-smooth">
          <div class="ml-auto inline-block w-full md:w-5/12">
            <div class="flex h-screen flex-col items-center justify-center">
              <LottieAnimation />
            </div>
            <div class="flex h-screen flex-col items-center justify-center">
              <LottieAnimation2 />
            </div>
            <div class="flex h-screen flex-col items-center justify-center">
              <LottieAnimation3 />
            </div>
            <div class="flex h-screen flex-col items-center justify-center">
              <LottieAnimation4 />
            </div>
            <div class="flex h-screen flex-col items-center justify-center">
              <LottieAnimation5 />
            </div>
          </div>
          <div class="ml-auto inline-block w-full md:w-5/12">
            <div class="flex h-screen flex-col items-center justify-center">
              <h2 class="mb-5 text-4xl">Animation 1</h2>
              <p class="mb-5">description</p>
            </div>
            <div class="flex h-screen flex-col items-center justify-center">
              <h2 class="mb-5 text-4xl">Animation 2</h2>
              <p class="mb-5">description</p>
            </div>
            <div class="flex h-screen flex-col items-center justify-center">
              <h2 class="mb-5 text-4xl">Animation 3</h2>
              <p class="mb-5">description</p>
            </div>
            <div class="flex h-screen flex-col items-center justify-center">
              <h2 class="mb-5 text-4xl">Animation 4</h2>
              <p class="mb-5">description</p>
            </div>
            <div class="flex h-screen flex-col items-center justify-center">
              <h2 class="mb-5 text-4xl">Animation 5</h2>
              <p class="mb-5">description</p>
            </div>
          </div>
        </div>

        <PrimaryFeatures />
        <SecondaryFeatures />
        <CallToAction />
        <testimonials />
        <Pricing />
        <Faqs />
      </main>
      <Footer />
    </>
  )
}

{
  /* <div id="lottie_container" class="flex h-[1200px]">
          <div class="ml-auto inline-block w-full md:w-5/12">
            <div class="flex h-screen flex-col items-center justify-center">
              <div class="mb-5">
                <LottieAnimation />
              </div>
            </div>
          </div>
          <div class="ml-auto inline-block w-full md:w-5/12">
            <div class="flex h-screen flex-col items-center justify-center">
              <h2 class="mb-5 text-4xl">Title 1</h2>
              <p class="mb-5">Description 1</p>
            </div>
            <div class="flex h-screen flex-col items-center justify-center">
              <h2 class="mb-5 text-4xl">Meet Benny</h2>
              <p class="mb-5">I was born 20 May 2020</p>
            </div>
            <div class="flex h-screen flex-col items-center justify-center">
              <h2 class="mb-5 text-4xl">Meet Benny</h2>
              <p class="mb-5">I was born 20 May 2020</p>
            </div>
          </div>
        </div> */
}
`