Can GSAP + ScrollTrigger scrub a video on scroll?

[JasonD]

Hello GSAP family, my colleagues are pointing me to  https://scrollyvideo.js.org/ as the effect they want, and I wanted to know if this was something GSAP can do as well so I don't have to add this code for no reason.  

I want to : 

1. use scrollTrigger to play the video

2. use it to scrub through the video as you move down the page.

3. Would it be better that the video is a video tag? or should I use the video as a background? ( I'm just starting this process, so I have no idea.

 

Thanks in advance. 

[Cassie]

Heya!

So the tagline on this library is quite apt really
 

Quote

Responsive scrollable videos without obscure video encoding requirements.

That's the difficulty - the video encoding. GSAP can scrub through something no probs, but that's not the hard bit here.

Here's a thread with more info
 

Depending on how knowledgable you are with video encoding it may be worth it to give that library a shot? I personally would, seems like it does a lot of the hard work for you
 

Quote

 

Method 1: WebCodecs and Canvas

Using the new WebCodecs API we are able to get all frames in the video and have them ready to draw to a canvas. This method is the most performant, but has two drawbacks: first, depending on the device and the size of the video, using the WebCodecs API will take some time to process all the frames, so the animation will not be available immediately upon page load. Secondly, the WebCoedecs API is currently only available on Chrome, and the WebCodecs polyfill does not work for this application.

If WebCodecs is not supported by the browser or has not finished processing all frames, it falls back to method 2:
 

Method 2: HTML5 Video and playbackRate
This method simply embeds the video with an HTML <video> tag, and it plays the video when the video needs to be animated. To adjust to the scroll speed, this method modulates the playbackRate attribute on the video in order to dynamically mimic a faster or slower scroll speed. This method is extremely smooth when the scroll direction is moving the video forward, but unfortunately does not work in reverse because playbackRate cannot be a negative value.

Thus, if the video needs to be animated backwards, this library falls back to method 3.
 

Method 3: HTML5 Video and currentTime
This method is the way that scrollytelling videos have traditionally been done, using an HTML <video> tag and skipping directly to frames using currentTime. However, this method requires the video to be encoded at keyframe = 1, which causes the video to be a lot larger or the quality to drop. Unfortunately, this is the only option for scenarios where methods 1 and 2 are not supported, or on mobile safari browsers where somehow this method performs better than method 2. Thus, to achieve maximum performance under all circumstances, it is still recommended to encode videos with keyframe = 1, if possible.

 

 

[JasonD]

Thanks Cassie.  I've implemented it just now, and for the most part it is really easy to do.  I just love GSAP so, I was hoping there was something I was missing. Thanks for the link as well.

[Joshua Frank]

@JasonDDid you mean that you got it working, but without GSAP?

[JasonD]

I used the other library.  Not gsap