search

darkroomengineering / lenis

How smooth scroll should be
https://lenis.darkroom.engineering
MIT License
7.33k stars 316 forks source link

Problem with animations and Lenis Scroll stop #362

Closed DanielKNDZ closed 3 days ago

DanielKNDZ commented 3 days ago

Hello. I constantly encounter an issue when using Lenis Scroll and animations that are off-screen. In this case, I'm using GSAP to animate images. Example:

gsap.from(".item", {
    duration: 2.4,
    y: "1000",
    opacity: 0,
    delay: 0,
    ease: Expo.easeInOut
});

Overall, Lenis Scroll continues to work, but at the end of the page, there's a sudden scroll stop instead of a smooth one. The problem definitely lies with the position of the animated elements that are outside the viewport. How can this be fixed?

PS: If I change y: 1000 to y: -1000 to animate from the top, scrolling smoothly stops when scrolling back up.

clementroche commented 3 days ago

Please share a reproduction link. By applying transform to your element you're increasing the scrollHeight so lenis limit is wrong. You should animate those element inside a wrapper with overflow:clip

DanielKNDZ commented 3 days ago

Please share a reproduction link. By applying transform to your element you're increasing the scrollHeight so lenis limit is wrong. You should animate those element inside a wrapper with overflow:clip

Got it! Thank you! Now it works well with overflow: clip!