I am attempting to build a proof of concept for a site where a background video placed inside a div will advance through the frames as the page is scrolled. The good news is that it does just that. The video loads, and as the page scrolls down, the video frames advance. The issue is that my current solution uses the entire page height in determining the frame and scroll position so if a video is towards the top of the page, it moves very slowly. A video in the middle of the page appears to have the right timing, but then a video at the end of the page, having already started frame advancing while the scroll position was at the top of the page, is almost done by the time you see it.
I would like, if possible, for each video to begin the animation when it scrolls into view, but have the timing based on the position and height of the section containing it so it starts animating as it comes into view, and completes as it is going out of view. I’ve attempted several calculations in an attempt to adjust the frame start, but apparently I have no idea what I’m doing. I’m only as good as what I can find through the Googles, and feel like I’ve learned more about jquery/java in the last day and a half than I thought possible, but not enough to figure this out.
I’ll gladly take any insight or criticism. Maybe it’s just a pipe dream, but I feel like it’s just a matter of locking down the right calculation to get things working.
Here is the published version: http://animate-test.webflow.io/
And the share link: https://preview.webflow.com/preview/animate-test?preview=27ac8063def5e475485b1ce23d656c70
Please be gentle. I’m a hack at best.