When using GSAP and React Slick together, React Slick's click events can affect GSAP's fixed positioning. To resolve this issue, you need to refresh GSAP's ScrollTrigger after React Slick's click events cause changes in the layout.

[yjj-517]

`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;

`