GSAP Scrolltrigger Pin

[Shopistan]

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");
        },

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

 

[Rodrigo]

Hi @Shopistan and welcome to the GreenSock forums!

 

There are a few things. First is almost impossible for us to debug live sites, that's why we normally require a minimal demo in order to see code we can edit and play with, which speeds up support quite a lot.

 

The few things I can check in your site is that you're using GSAP and ScrollTrigger 3.11.4, please update to the latest version: 3.11.5 and see how that works. Also you are including ScrollMagic in your site, any particular reason for that? With ScrollTrigger there is actually no need for including ScrollMagic. If you are indeed using both ScrollTrigger and ScrollMagic, that could be the issue here. Also you are using slick slider, be sure to call ScrollTrigger.refresh() after the slider is created and see how that works as well.

 

Hopefully this helps.

Happy Tweening!