lag when using position sticky (pin property in GSAP)

[issam-seghir]

...

// initialize lenis smooth scrolling
const lenis = new Lenis({
    lerp: 0.07,
    wheelMultiplier: 0.7,
    touchMultiplier: 0.7, 
    orientation: "vertical", 
    gestureOrientation: "vertical",
    normalizeWheel: false,
    infinite: false, 
});

function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

// ------------ Using Gsap ScrollTrigger with lenis  ---------------------
function connectToScrollTrigger() {
    lenis.on("scroll", ScrollTrigger.update);
    gsap.ticker.add(function (time) {
        lenis.raf(time * 1000);
    });
}
connectToScrollTrigger();

// ai section animation
gsap.from(".ai__desc", {
    // duration: 3 ,
    opacity: 0, // Rotate back to 0 degrees to reveal the screen
    scrollTrigger: {
        trigger: ".ai",
        pin: true, 
        start: "top top", 
        end: "+=1500", 
        scrub: 1, 
        markers: true,
    },
});

pin: true

pin: false

Loading ... (https://i.imgur.com/NFfJXUP.gif)

[clementroche]

please provide a codesandbox

[issam-seghir]

i'm not familiar with codesandbox , and I am facing an error that says "Cannot import an empty path", even though everything is set up correctly. Here's the code: https://codesandbox.io/s/busy-ives-shcxfm?file=/index.html:0-899

[issam-seghir]

i discovered that the problem is with GSAP and not with lenis