Skip to content

Feature: Allow manual isLocked updates #513

@damnsamn

Description

@damnsamn

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions