jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
https://react-scroll-parallax.damnthat.tv/
MIT License
2.86k stars 158 forks source link

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

Open thepuzzlemaster opened 1 year ago

thepuzzlemaster commented 1 year ago

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 commented 1 year ago

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.