Animate Lottie per Scrolling

<html lang="ja">
<head>
.....
...

    <style>
        section {
            height: 100vh;
        }
        
        .target {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .target div {
            width: min(1200px, 100%);
            margin: 0 auto;
        }

    </style>
<head>
<body>

    <section></section>
    
    <section class="target">
        <div class="lottie"></div>
    </section>
    <section></section>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js" integrity="sha512-jEnuDt6jfecCjthQAJ+ed0MTVA++5ZKmlUcmDGBv2vUI/REn6FuIdixLNnQT+vKusE2hhTk2is3cFvv5wA+Sgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <script>
        //Lottieの初期化
        let animation = lottie.loadAnimation({
            container: $(".lottie")[0],
            renderer: "svg",
            loop: true,
            autoplay: false,
            path: "lottie.json" //ローカルで再生する場合はbase64でdataURLにしてここに貼り付ける
        });

        //クリックで再生・一時停止
        let tgl = true;
        $(".lottie").on("click", () => {
            tgl ? animation.play() : animation.pause(); // 停止ならstop();
            tgl = !tgl;
        });

        // GSAP ScrollTriggerプラグインでLottieのスクロール連動アニメーション
        gsap.registerPlugin("ScrollTrigger");
        ScrollTrigger.create({
            trigger: $(".target")[0],
            start: "top top",
            end: "+=" + $(".target").height() * 5,
            pin: true,
            markers: true,
            onUpdate: (self) => {
                let progress = self.progress;
                let frame = animation.totalFrames * progress;
                animation.goToAndStop(frame, true);
            }
        })
    </script>
</body>
<html>