Trying to do a video scroller that instead of using scroll position to update video.currentTime is using scroll speed to update video.playbackRate. Have two videos, one forward and one in reverse, and depending on scroll direction it switches between them using 'autoAlpha'. See Codepen below.
Results is smoother using playbackRate, BUT the problem I'm facing is the transition between forward and reverse videos, especially at high scroll speed. Even though video.currentTime is updated continuously to prepare for switch in direction, the last frame viewed on the video that is being switched from becomes visible for 50-250ms. Example: Scroll forward 5000px, then reverse 3000px, then when switching back to forward scroll, now at position 2000px, the last seen video-forward frame that was seen at 5000px now become visible for 50-250ms. I've tried in Chrome, Edge, and Firefox, same issue in all.
Not sure why the video frame shown on screen after autoAlpha=1 does not match the frame at currentTime. Any idea why I'm seeing this, and is there a way to mitigate it?
I've used code from OSUblake's scroller demos :
and Ollie's "Scrolling controls for HTML5 video":