flux_capacitor

Sorry our posts crossed at the same time each other. Wow! This solution is much better than my patch-up job Thank you very much!

Thank you OSUblake! I was completely off the mark. I eventually understood with your help :) I've updated my CodePen with a for loop to shorten then code length using simple incremental ids for each subsequent <video> element in the page. This simple code does the trick, provided the start & end points are the same so the video lengths (rate of scroll) are pretty much the same. As I kept shshaw's original functions, the code works on touchscreens and check that the videos are loaded. https://codepen.io/flux_capacitor/pen/dyRXPwd

Then yes I am mistaken, because I can perfectly make a simple animation of a single or several 2D elements with ScrollTrigger, e.g. say, creating several boxes in an HTML page with CSS then animate their path along the X or Y axis on screen, or modifying some of their CSS properties like background color and alpha values. This is indeed very simple according to the various tutorials out there. However I don't see what animated paths and CSS properties have in common with parsing a video. This is way more difficult with respect to the syntax and the code length compared to just moving boxes or filling them with a color. Especially when adding several videos on page. To show this I forked shshaw's example here: https://codepen.io/flux_capacitor/pen/dyRXPwd As you can see the code is not as simple as moving green and blue boxes on screen, especially if you want the video to be scrubbed on a smartphone also. So far I managed to achieve two things: Get rid of the fixed position of the fullscreen video, replacing it with the pinning property natively provided by ScrollTrigger. The video now scrolls with the text until it reaches a specific position near the top of the window, then it stops there (is pinned) and scrubs through its content while the user continues scrolling, and finally when the video reaches the end it resumes scrolling with text. Get rid of the invisible long scrolling container whose position controlled scrubbing in shshaw's previous example, replacing it with ScrollTrigger's native scrub and end properties. But I fail to see how I could control the same way subsequent similar other videos down in the page flow.

Hi, I can't find any tutorial to scrub through several pinned MP4 videos natively with ScrollTrigger. Everything out there is about bitmap or vector animations (which I understand, as GSAP is primarily focused on such kind of animation). Maybe those tutorials do exist, but i didn't find them. What I found is people sometimes asking for this, in order to build for example Apple-like transitions. Alas pretty much all answers redirect them to existing topics about sprite or canvas animations (what Apple does indeed). But a sprite animation is not scrubbing through a video, so the initial question remains unanswered. Topics or CodePen addressing video scrubbing control do exist, like this one: https://codepen.io/shshaw/pen/9e810322d70c306de2d18237d0cb2d78 found in this topic, see also this other topic, or the deprecated solution below) but most of them are a mix of traditional scrubbing with HTML5+Javascript using fullscreen videos in CSS "fixed" position, using an invisible "wrapper", "container" or "spacer" whatever one calls them, i.e. a very long element of several hundreds pixels or vh height making use of ScrollTop to control the scrubbing length amount, instead of the smart start/end point markers provided natively by GSAP and ScrollTrigger. What about controlling (i.e. pinning & scrubbing through) several successive short videos (that are not fullscreen) with mouse/trackpad on a single web page? Is it possible to do that natively (without a long spacer scrolling) with ScrollTrigger ? I discover GSAP and I am still a beginner. PS: my question does not deal with choppy scrubbing of MP4 videos in some browsers or devices as I already understood codec constraints with the correct amount of GOP, I- and B-frames and the overall video encoding optimization process to achieve smooth animations.