I've found myself with a use case where I'd like to set the isLocked property manually.
Problem
I've got a fairly complex animation at the top of the page that serves as a pseudo page transition. Outgoing animation for the current page syncs up perfectly with the initial animation of the incoming page, so it looks as if there's been a smooth page transition.
When we trigger this animation, I'm calling lenis.scrollTo(0, { lock: true }) to ensure that the user is forced to land at the top of the page before we change the route, to preserve the illusion. If the user is already at the 0 scroll position though, the scroll animation completes immediately (if it even starts at all) isLocked stays effectively false and the user is free to scroll away from the page transition animation before the route change occurs, which breaks the illusion.
Solution
The use case above is obviously very specific, but I really what I need is to be able to call lenis.lock() at the beginning of the animation, and lenis.unlock() at the end of the animation. I think this is a generic and simple enough feature to warrant being baked into the core library.
I do see some potential for confusion for this feature to be misinterpreted as a typical "scroll-lock" feature which it's not intended for. Eg. root becomes unscrollable whilst a modal is in view, root-level scroll bar disappears (equivalent of setting overflow: hidden on the scrollable root). This is not that (which I believe is covered by lenis.stop() anyway)
I'll raise a PR for this change now.
I've found myself with a use case where I'd like to set the
isLockedproperty manually.Problem
I've got a fairly complex animation at the top of the page that serves as a pseudo page transition. Outgoing animation for the current page syncs up perfectly with the initial animation of the incoming page, so it looks as if there's been a smooth page transition.
When we trigger this animation, I'm calling
lenis.scrollTo(0, { lock: true })to ensure that the user is forced to land at the top of the page before we change the route, to preserve the illusion. If the user is already at the0scroll position though, the scroll animation completes immediately (if it even starts at all)isLockedstays effectivelyfalseand the user is free to scroll away from the page transition animation before the route change occurs, which breaks the illusion.Solution
The use case above is obviously very specific, but I really what I need is to be able to call
lenis.lock()at the beginning of the animation, andlenis.unlock()at the end of the animation. I think this is a generic and simple enough feature to warrant being baked into the core library.I do see some potential for confusion for this feature to be misinterpreted as a typical "scroll-lock" feature which it's not intended for. Eg. root becomes unscrollable whilst a modal is in view, root-level scroll bar disappears (equivalent of setting
overflow: hiddenon the scrollable root). This is not that (which I believe is covered bylenis.stop()anyway)I'll raise a PR for this change now.