Jump to content
Search Community

Smooth Video Scrolling using playbackRate instead of currentTime.

kristoffer test
Moderator Tag

Recommended Posts

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": 

 

See the Pen left by krispen (@krispen) on CodePen

Link to comment
Share on other sites

Hey kristoffer,

 

Unfortunately it looks like the challenges you're facing are more related to generic logic issues that are unrelated to GSAP. As much as we love helping people around here, we just don't have the resources to provide free consulting services for things that don't directly relate to GSAP. Is there anything GSAP-specific that I can help you with? If so, I'm happy to help.

Link to comment
Share on other sites

9 hours ago, ZachSaucier said:

Hey kristoffer,

 

Unfortunately it looks like the challenges you're facing are more related to generic logic issues that are unrelated to GSAP. As much as we love helping people around here, we just don't have the resources to provide free consulting services for things that don't directly relate to GSAP. Is there anything GSAP-specific that I can help you with? If so, I'm happy to help.

Hi Zach, thanks for your reply. That makes sense. I though maybe the issue could be related to how gsap/autoAlpha was updating the screen rendering. If that's not the case then I assume it has more to do with how the video element behaves.

Link to comment
Share on other sites

14 hours ago, kristoffer said:

I though maybe the issue could be related to how gsap/autoAlpha was updating the screen rendering. If that's not the case then I assume it has more to do with how the video element behaves.

I don't think it's related to what GSAP is doing. If I'm wrong, please let us know :) 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...