hi friends, so i had an animation that was working great on desktop, but when i check it on mobile it doesn't. since it is on a method and it's a scrollTrigger animation i'm having trouble to write it, can someone help me? thanks!
function Hero() {
const imgRef = useRef();
useEffect(() => {
const q = gsap.utils.selector(imgRef);
let mm = gsap.matchMedia();
mm.add({
isMobile: "(max-width: 500px)",
isDesktop: "(min-width: 501px)",
}, (context) => {
let {isMobile, isDesktop} = context.conditions;
q(".textBtn").forEach((txt) => {
gsap.to(
txt,
{
scrollTrigger: isDesktop ? { trigger: txt, scrub: 0.8, start: 'top 40%', end: "+=400", pin: true, pinSpacing: false } : ??
}
);
});
}, []);