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>
);
}
