`import { useGSAP } from "@gsap/react";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(useGSAP, ScrollTrigger);

const gsapTriggerRef = useRef(null);
const gsapDivRefs = useRef<(HTMLDivElement | null)[]>([]);

useGSAP(() => {
const tl = gsap.timeline({
scrollTrigger: {
trigger: gsapTriggerRef.current,
start: "center center",
end: "+=1000",
scrub: true,
pin: true,
markers: true,
},
});
gamesData.forEach((_, i) => {
if (i > 0) {
tl.to(gsapDivRefs.current[i - 1], { zIndex: 10 }).to(gsapDivRefs.current[i], { zIndex: 20 }, "<");
}
});
});
`
When I run it on this page, there are no issues.
After switching routes and clicking React Slick's click events, a fixed positioning offset problem occurs.
I have already included the react-slick CSS in the component, but this problem still occurs.

`
import Slider from "react-slick"; //slick轮播图
import "slick-carousel/slick/slick.css"; //slick
import "slick-carousel/slick/slick-theme.css"; //slick

const View: React.FC = () => {
const palyerSlider = useRef<typeof Slider | null>(null);
const palyerAvatarSlider = useRef<typeof Slider | null>(null);
const [palyerNav, setPalyerNav] = useState(null);
const [palyerAvatarNav, setPalyerAvatarNav] = useState(null);
useEffect(() => {
setPalyerNav(palyerSlider.current);
setPalyerAvatarNav(palyerAvatarSlider.current);
}, [palyerType, loading]);
};
export default View;

`