Jump to content
Search Community

Animating video time on scroll isn't smooth on Firefox & Chrome while it works for Safari

yousoumar test
Moderator Tag

Recommended Posts

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

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.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...