Jump to content
GreenSock

DevC

Syncing timeline with video

Go to solution Solved by OSUblake,

Recommended Posts

Tweenings Greetings,

 

I've shared a demo that works okay in codepen, but has many syncing issues in prod (react). I'd like to know if there is a better way to do what I'm doing here. I'm also curious to find some docs on helping gsap get initialized before rendering. Seem to have the odd refresh where my text treatment is all messed up.

After initial text and video wipe this should happen:
With the frame cuts of the video the span in "The next number is" {1} should update.

With the frame cuts the bg gradient should also update.
On repeat is should stay in sync with the video.

Thanks for any help. First time forum asker.

See the Pen bGYWNvR by dcha (@dcha) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums @DevC

 

One issue with your syncing is that you are not waiting for your video to load. For example, if I cache bust the URL to your video, video.duration will be NaN.

 

If you need to sync up stuff, there are at least 3 different ways I can think of.

 

1. You add an event listener like timeupdate to your video, and apply changes based on the video's currentTime.

 

2. Instead of doing video.play(), you actually animate the video with GSAP. Something like this.

 

.to(video, {
  currentTime: video.duration,
  duration: video.duration,
  ease: "none"
})

 

3. Instead of using video, you animate each frame using canvas and a bunch of images.

 

See the Pen zYPwNEz by GreenSock (@GreenSock) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Thanks @OSUblake you lead me on the right path. For browsers of the future, I ended up using the video playback/currentTime as the progress ticker for the timeline. That did the trick.

Something like this:

 

  function startVideo(timeline) {
    if (heroVideoRef && heroVideoRef.current && timeline) {
      const percent =
        heroVideoRef.current.currentTime / heroVideoRef.current.duration
      timeline.progress(percent)
    }
  }

 

  • Like 2
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.
×