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. #80
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 { 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;
`