Saraf

U guys are so responsive. Thanks

@Visual-Q This is the site url https://brave-poitras-97d8a6.netlify.app https://brave-poitras-97d8a6.netlify.app/buyers https://brave-poitras-97d8a6.netlify.app/sellers And the hook useScroll() has the following code import gsap from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; function useScroll() { if (typeof window !== `undefined`) { gsap.registerPlugin(ScrollTrigger); } } export default useScroll;

Hi Devs, I don't know what's wrong in my code , the animations are super slow in firefox and sometimes in chrome as well. I have two issues Translating animations are super slow in firefox and sometimes in chrome Text animations are flickering on scroll I use SVG as react components Can u guys please help me improve my code. Im using NextJs and GSAP3. Thanks. let timeline = gsap.timeline({ delay: tableAndAbove ? 0.5 : 0, scrollTrigger: !tableAndAbove && { trigger: "#sellersLandingMobileContainer", start: "30% 20%%", }, }); if (tableAndAbove) { timeline.from("#sellersLandingMobile", { duration: 1, scale: 0.8, autoAlpha: 0, rotation: 0.01, }); timeline.from( "#sellersLandingMobile", { duration: 1, translateX: "20%", ease: "expo.out", rotation: 0.01, }, "-=0.6" ); } timeline.to( "#sellersLandingHeroText .hide-text", { duration: 0.8, ease: "expo.out", translateY: 0, delay: 0, autoAlpha: 1, rotation: 0.01, }, "-=0.9" ); timeline.from( "#sellersLandingCTA", { duration: 0.5, ease: "expo.out", scale: 0.5, autoAlpha: 0, rotation: 0.01, }, "-=0.5" ); document.querySelectorAll("#sellersLandingStoreLink").forEach((el) => { timeline.from( el, { duration: 0.5, ease: "expo.out", translateY: 20, autoAlpha: 0, rotation: 0.01, }, "-=0.3" ); }); const images = [ "#sell24By7Img", "#chatBroadcastInvoiceImg", "#lightningfastpaymentsImg", ]; const sections = [ "#sell24By7TextContainer", "#chatBroadcastInvoiceTextContainer", "#lightningfastpaymentsTextContainer", ]; useScroll(); useEffect(() => { gsap.to("#punchGrowthHeading .hide-text", { scrollTrigger: { trigger: "#punchGrowthHeading", start: "top 80%", }, duration: 1, ease: "expo.out", translateY: 0, rotation: 0.01, }); images.forEach((el, index) => { gsap.from(el, { scrollTrigger: { trigger: el, start: "30% 80%", }, duration: 1, ease: "expo.out", autoAlpha: 0, transform: `translate3d(${index === 1 ? 100 : -100}px, 0, 0)`, perspective: 1000, rotation: 0.01, force3D: true, }); }); sections.forEach((el) => { gsap.to(`${el} .hide-text`, { scrollTrigger: { trigger: el, start: "30% 80%", }, duration: 1, ease: "expo.out", translateY: 0, rotation: 0.01, }); gsap.from(`${el} p`, { scrollTrigger: { trigger: `${el} p`, start: "30% 80%", }, duration: 1, ease: "expo.out", autoAlpha: 0, }); });

Thanks

Hello devs , i'm trying to implement smooth scroll and scrollTrigger pinning on same view port. As the smooth scroll works by disabling scroll and translating -Y , pinned div also translates instead of pinning. Reference : https://codepen.io/wooooosky/pen/LQNZgv Can anyone give me a solution , would be helpful. Thanks in advance.