[Animations are laggy :(]

U guys are so responsive. Thanks

[Animations are laggy :(]

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

 

[Animations are laggy :(]

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 

1. Translating animations are super slow in firefox and sometimes in chrome
2. 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,
      });
    });

 

[GSAP ScrollTrigger pinning and smooth scroll together]

Thanks

[GSAP ScrollTrigger pinning and smooth scroll together]

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 : 

Can anyone give me a solution , would be helpful. Thanks in advance.

See the Pen LQNZgv by wooooosky (@wooooosky) on CodePen