Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrolling beyond a scrollStart or scrollEnd value does not update the affected property to final value #213

Open
thepuzzlemaster opened this issue Apr 11, 2023 · 1 comment
Labels

Comments

@thepuzzlemaster
Copy link

thepuzzlemaster commented Apr 11, 2023

I'm trying to have a somewhat limited scroll range for affecting my elements. I've noticed that as I shrink the delta between scrollStart and scrollEnd, sometimes when scrolling, my transforms are not applied once I've passed the limit of startScroll or endScroll in the respective direction.

e.g. I have a repro link below which translates opacity of an element from 0 to 1, when scrolling from 50 to 250. If I scroll quickly, it seems to bypass any handlers and the transformation is completely skipped. In those cases, I will be past 250 scroll position, but the target element's opacity value will still be set to 0.

Repro link here

Is there some way to ensure that even if passing the scroll limits, the min/max values get applied? Or is there a different approach I should be taking here to get this to work?

I should add that what I'm ultimately hoping to achieve here, is a transformation that can be controlled more granularly than when an element appears/disappears from view.

My end-goal transformation is to have 3 elements that start spread out when first come into view, and then come together when approximately in the middle of the screen, and then stay there when continuing to scroll. So transforms that essentially take half the screen's height to complete.

@jscottsmith
Copy link
Owner

Strange, but yes I see the bug. Thanks for the example and clear description. Not sure if this is an easy fix or not but it will need to be handled here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants