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.
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.
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.
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
andscrollEnd
, sometimes when scrolling, my transforms are not applied once I've passed the limit ofstartScroll
orendScroll
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.