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