[GSAP animation on scroll trigger]

I am new to GSAP, i have a video to implement animation on scroll with pinned section. I'll attach link of video below. please help me how to create animation like that.

 

[GSAP Scrolltrigger Pin]

I am using scrolltrigger pin from GSAP to pin sections on page, the issue I am facing is when section get pinned i.e, get into position: fixed, there is a little jerk there. how can i remove that jerk or make it smooth while section get pinned. i don't have codepen but the site link https://kwr4x8x916ps6dj6-58389889124.shopifypreview.com/pages/nos-valeurs. Anyone who can help?  My code is as follow
 

(function () {
  document.addEventListener("DOMContentLoaded", function () {
    const headerSpacing =
      document.querySelector("#section-header").offsetHeight;

    gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

    const materialContainer = document.querySelector(
      "body.template-Nos-valeurs main.page-sections"
    );

    const sections = materialContainer.querySelectorAll(
      ".shopify-section:not(#shopify-section-template--18557973627226__2113a9df-0210-4faa-97bb-77faee7f71f4, #shopify-section-template--18557973627226__main, #shopify-section-template--18557973627226__0f93aafa-617d-4f57-be76-2561835aefa9, #shopify-section-template--18557973627226__9da12b1e-ecc4-4c8f-b68a-3c9c3ac5261c)"
    );

    sections.forEach((section) => {
      const content = section;

      ScrollTrigger.create({
        trigger: content,
        start: `top-=${headerSpacing}px top`,
        pin: true,
        end: "bottom center",
        // markers: true,
        onEnter: () => {
          content.classList.add("is--Active");
        },
        onLeaveBack: () => {
          content.classList.remove("is--Active");
        },

      });
    });
  });
})();