yousoumar Posted January 19, 2022 Share Posted January 19, 2022 Hi guys ! I got this code for animating my video, it works fine on Safari, but on Chrome & Firefox, it jumps to some duration suddenly. I am missing something ? ref is an HTML element reference. I am using gsap in a Next app. Thanks ! export function useAnimOnScroll(ref) { let video = ref.current.querySelector("video")!; let tl = gsap.timeline({ scrollTrigger: { trigger: ref.current, scrub: true, start: "top top", end: "bottom top", markers: true, pin: true, }, }); tl.to(video, { currentTime: video.duration - 2, }); } Link to comment Share on other sites More sharing options...
GreenSock Posted January 19, 2022 Share Posted January 19, 2022 Hi @yousoumar. It's super difficult to troubleshoot blind (without a minimal demo), but this sounds like something unrelated to GSAP/ScrollTrigger. Perhaps your video wasn't loaded or you encoded it without frequent enough keyframes to do smooth jumping to certain frames? Video is heavily dependent on the way you encode it and how the browser decodes. I'd also recommend checking to see if console.log(video.duration) returns what you expect when you plug it into the tween. If the metadata hasn't fully loaded, that won't accurately reflect things. If you still need help with something GSAP-specific, please provide a minimal demo, like in CodeSandbox. 1 Link to comment Share on other sites More sharing options...
yousoumar Posted January 20, 2022 Author Share Posted January 20, 2022 Thanks @GreenSock, you gave me some useful insights. Again thanks for GreenSock ! 1 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