Sync gsap timelines with video

[Bureau Blanc]

Hi,

 

I would like to trigger a gsap timeline on certain keypoints of a video.

On the video I have an progress-indicator with dots respresenting these keypoints. So when the indicator hits a keypoint, the animation for that keypoint should start. I can't figure out why the timing isn't correct, the animations always start after the keypoint...

 

See the Pen ExdOPOv by BureauBlanc (@BureauBlanc) on CodePen

[Rodrigo]

Hi,

 

I had a hard time following your code trying to find a way to solve the issue.

 

At least I can tell you what the issue is. The animations are actually happening. Right now you have a video that lasts 10.03 seconds and you want each section to happen at zero seconds, 1/3 and 2/3 of the video, that is 3.34 seconds and 6.68 seconds. If you scrub GSAP devtools scrubber you'll see that with this code the elements are removed at those exact times:

let titlesTiming = videoDuration / 3;

tlMaster
  .addLabel("start")
  .to(".timeline", { scaleX: 1, duration: videoDuration })
  .add(animationOne(), "start")
  .add(animationTwo(), "start+=" + (titlesTiming))
  .add(animationThree(), "start+=" + (titlesTiming * 2));

The problem is the animation for the white line at the bottom. The progress of a video is 100% linear it has no easing. A GSAP instance by default has a power1.out easing function applied to it, which means the animation will move faster at the start and then slower towards the end. You can see it here:

See where the white line is and where GSAP Devtools progress bar is?

 

That's basically the problem. Now I tried adding easing: "none" to a bunch of GSAP instances in your setup, but it didn't make any difference, that's why I said that I had a hard time trying to solve the issue. I know what the issue is but can't find a way to solve it. Since this is your codebase and you're more familiar with it, probably it should be far easier for you to solve it.

 

Hopefully this helps.

Happy Tweening!

[Bureau Blanc]

Thanks @Rodrigo for your feedback, it makes sense. I can't find a way to solve it either.

[Cassie]

I added ease: "none" to a couple of tweens

Is this better?

See the Pen ExdGpVe?editors=0010 by GreenSock (@GreenSock) on CodePen