amcaw

Wow, thanks so much for getting back to me with all this ! This is gold and it definitely helps a lot. I can see that you even found a solution for disappearing video on Safari, that's awesome. Have a nice day ?

Thanks a lot @AdventurousDeveloper for sharing your knowledge. Much appreciated !

Indeed, thanks for your kind reply though. If anyone know what's happening... Is it possible that a codepen works fine but not the same code in production ?

Hi everyone, I'm not sure if my problem is strictly GSAP related... but here it is. I'm using GSAP and Scrolltrigger to play video on scroll. I know that encoding is super important so I used ffmpeg settings from the codepen at the end of this post. But I'm still having issues with Firefox : video is laggy while scrolling. Even with this video provided in the original codepen. It happens only in Firefox though. Chrome and Safari are fine (and Edge is ok-ish). I'm using Svelte to build my page so here is a Repl to show how I did it. Note that everything is working fine in every browser in the Repl. The problem shows up when the app is built locally with npm run dev and in production with npm run build). Is there a way to improve things so video would be smooth in Firefox too ? I see nothing in the console. (Video encoding, Svelte, no codepen of my own... I'm might be off topic here. Sorry about that. But still any help would be much appreciated !) EDIT : I tried to create a classic index.html file with the HTML/CSS/JS from the codepen below and I still have issues while the index.html file is online...