JasonD Posted October 19, 2023 Share Posted October 19, 2023 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. Link to comment Share on other sites More sharing options...
Cassie Posted October 19, 2023 Share Posted October 19, 2023 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. Link to comment Share on other sites More sharing options...
JasonD Posted October 19, 2023 Author Share Posted October 19, 2023 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. 2 Link to comment Share on other sites More sharing options...
Joshua Frank Posted January 12 Share Posted January 12 @JasonDDid you mean that you got it working, but without GSAP? Link to comment Share on other sites More sharing options...
JasonD Posted January 12 Author Share Posted January 12 I used the other library. Not gsap Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now