[Animation not working in production but works in development - NextJS]

Hi, i have a same issue here...

i added lazy false into .to function but thats not gonna work on production build(next js 13.2.3).

 

"use client";
import React, { useEffect, useLayoutEffect, useRef } from "react";
import gsap from "gsap";

const useIsomorphicLayoutEffect =
  typeof window !== "undefined" ? useLayoutEffect : useEffect;

let check = false;

export default function AnimatedLine() {
  const mainSvgRef = useRef();
  const line1Ref = useRef();

  useIsomorphicLayoutEffect(() => {
    const ctx = gsap.context(() => {
      gsap.set("svg", {
        visibility: "visible",
      });

      const lineTimeLime = gsap.timeline();

      if (line1Ref.current.points.numberOfItems > 0) {
        lineTimeLime.to(line1Ref.current.points, {
          lazy: false,
          y: "+=60",
          stagger: {
            each: 0.009,
            repeat: -1,
            yoyo: true,
          },
          ease: "sine.inOut",
        });
      }

      lineTimeLime.timeScale(0.25);
    });

    function createLine() {
      const numPoints = 80;

      for (let i = 0; i < numPoints; i++) {
        let p = line1Ref.current.points.appendItem(
          mainSvgRef.current.createSVGPoint()
        );

        p.x = 0 + i * 30;
        p.y = 20;
      }
    }
    if (!check) {
      createLine();
      check = true;
    }

    return () => ctx.revert();
  }, []);

  return (
    <div
      style={{
        mixBlendMode: "normal",
        bottom: 0,
        marginTop: -150,
        marginBottom: 100,
        zIndex: 50,
        position: "relative",
      }}
    >
      <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" ref={mainSvgRef}>
        <polyline id="poly1" ref={line1Ref} />
      </svg>
    </div>
  );
}