Saraf Posted September 9, 2020 Share Posted September 9, 2020 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, }); }); Link to comment Share on other sites More sharing options...
Visual-Q Posted September 9, 2020 Share Posted September 9, 2020 Hey Saraf, Somebody may spot something but It's generally pretty hard to diagnose issues just seeing code without context. If possible try to create a reduced test case on codepen or al least a link to the site if so we can see what's happening. Also you should probably review the best ways to work with transforms in gsap in the cssPlugin docs, using gsaps properties may be more performant: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin 2 Link to comment Share on other sites More sharing options...
Saraf Posted September 9, 2020 Author Share Posted September 9, 2020 @Visual-Q This is the site urlhttps://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; Link to comment Share on other sites More sharing options...
GreenSock Posted September 9, 2020 Share Posted September 9, 2020 You definitely shouldn't be doing something like this: // BAD (slow) transform: `translate3d(${index === 1 ? 100 : -100}px, 0, 0)`, // GOOD: x: index === 1 ? 100 : -100 And "y" is the same as "translateY". A recent release of Chrome has a bug that seems to be causing rendering issues (not GSAP-specific). You can try setting will-change: transform on the problematic elements. Other than that, it's beyond the scope of these forums to do a full performance audit on a live web site. Your options are: Hire someone to do a performance audit (feel free to contact us or just post in the "Jobs & Freelance" forum) Recreate the issue in a minimal demo with only the absolute smallest amount of code and elements. See https://greensock.com/demo Good luck! 2 1 Link to comment Share on other sites More sharing options...
Saraf Posted September 9, 2020 Author Share Posted September 9, 2020 U guys are so responsive. Thanks 1 Link to comment Share on other sites More sharing options...
mfk Posted September 9, 2020 Share Posted September 9, 2020 2 hours ago, GreenSock said: A recent release of Chrome has a bug that seems to be causing rendering issues (not GSAP-specific). You can try setting will-change: transform on the problematic elements. Hello, any idea where i can read more about this Chrome issue? I think recently im seeing text flickering on 3 sites that i used gsap to animate texts. was wondering why they started to behave in that way when it was fine before. thanks in advance. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 9, 2020 Share Posted September 9, 2020 @mfk We have a thread about it here: but I haven't come across an actual bug report for Chrome yet. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now