function panelsAnimation() {
    const clipAnimate = Array.from(document.querySelectorAll(".clip-animate"));
    if (!clipAnimate.length) { /* NOSONAR */
      return false;
    }
    const panels1Contents = Array.from(
      clipAnimate[0].querySelectorAll(".design__element path, .inner")
    );
    const panels2Contents = Array.from(
      clipAnimate[1].querySelectorAll(".design__element path, .inner")
    );
    const panels3Contents = Array.from(
      clipAnimate[2].querySelectorAll(".design__element path, .inner")
    );

    const panel1Tl = gsap.timeline({
      defaults: {
        ease: "sine.inOut",
      },
    });
    panel1Tl
      .from(panels1Contents, {
        xPercent: gsap.utils.wrap([10, 20, 30, 10, -10]),
        autoAlpha: 0,
        stagger: 0.05,
      })
      .addLabel("firstout")
      .to(
        clipAnimate[0],
        {
          yPercent: -20,
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
          webkitClipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
          ease: "sine.inOut",
        },
        "firstout"
      );

    ScrollTrigger.create({
      trigger: ".panels__wrapper",
      start: "top bottom",
      //           //   end: '50%',
      scrub: true,
      animation: panel1Tl,
    });
    const panelTl = gsap.timeline({
      defaults: {
        ease: "sine.inOut",
      },
    });

    panelTl

      .from(clipAnimate[1], { scale: 1.2 }, "firstout")
      .from(
        panels2Contents,
        {
          xPercent: gsap.utils.wrap([10, 20, 30, 10, -10]),
          autoAlpha: 0,
          stagger: 0.05,
        },
        "firstout"
      )
      .addLabel("secondout")
      .to(
        clipAnimate[1],
        {
          yPercent: -20,
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
          webkitClipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
          ease: "sine.inOut",
        },
        "secondout"
      )
      .to(
        panels2Contents,
        { yPercent: -20, autoAlpha: 0, stagger: 0.05 },
        "secondout"
      )
      .from(clipAnimate[2], { scale: 1.2 }, "secondout")
      .from(
        panels3Contents,
        {
          xPercent: gsap.utils.wrap([10, 20, 30, 10, -10]),
          autoAlpha: 0,
          stagger: 0.05,
        },
        "secondout"
      );

    ScrollTrigger.create({
      trigger: ".panels__wrapper",
      start: "top top",
      end: "+=200%",
      scrub: true,
      pin: true,
      pinSpacing: true,

      animation: panelTl,
    });

    gsap.set(".clip-animate", {
      zIndex: (i, target, targets) => targets.length - i,
    });
  }

i'm facing some lag between second content and third content.


this my render component

import React from "react";
import Design from "../Icons/Design";
import Anchor from "../Icons/Anchor";

const IndexPanel = ({ panels }) => {
  console.log(panels);
  
  /* NOSONAR */
  return (
    <div className="panels__wrapper">
      {panels.length &&
        panels.map((panel, i) => {
          return (
            <div
              className={"panel" + (i + 1) + " panel__holder clip-animate"}
              key={panel.title}
              style={{
                backgroundImage: `url(${panel.image})`,
                backgroundRepeat: "no-repeat",
                backgroundSize: `cover`,
                backgroundPosition: "left center",
              }}
            >
              <div className="mobilebg"></div>
              <div
                className={
                  "design__element " +
                  (panel.direction == "Right" ? "right" : "")
                }
              >
                <Design></Design>
              </div>
              <section className="container panel">
                <div
                  className={
                    (panel.direction == "Right" ? "right" : "") + " inner"
                  }
                >
                  <h2 className="color-white bold">{panel.title}</h2>
                  <p className="color-white">
                    {panel.shortDesc.replace(" &amp; ", " & ")}
                  </p>

                  <Anchor
                    className="btn__secondary"
                    anchorText="LEARN MORE"
                    icon="true"
                    link={panel.link}
                  ></Anchor>
                </div>
              </section>
            </div>
          );
        })}
    </div>
  );
};
export default IndexPanel;