My animation using progress() is running slow

[miguelesquirol 0 Likes (Newbie)]

I want to synchronize an animation with a video. I'm updating the progress of the animation with the video position. It seems to work, with the only issue is that my animation is running slow. The video lasts 10seconds and the animation "says" it's just 3 seconds. Any help?

The animated text should move one second in, but that's not happening at the correct time.

See the Pen qBYLKva?editors=1111 by miguelesquirol (@miguelesquirol) on CodePen

[Rodrigo 5,077 Likes (Superhero)]

Hi @miguelesquirol and welcome to the GreenSock forums!

 

I think a good approach could be to set the duration of the timeline to the duration of the video. This is a rough example and the seek functionality could need some extra work:

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

 

Another option is tie the progress of the video with the progress of the timeline checking the current time of the video element divided by the duration of the video, using the time update event:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event

 

media.addEventListener('timeupdate', function() {
  tl.progress(media.currentTime / media.duration);
});

Hopefully this clarifies things enough.

 

Happy Tweening!

[geedix 90 Likes (Contributor)]

It seem to be working correctly. The animation starts at 1 second and seems to synch if you scrub or play the video. Did you fix it, or is there something I'm missing? 

[GreenSock 18,255 Likes (Superhero)]

35 minutes ago, Rodrigo said:

I think a good approach could be to set the duration of the timeline to the duration of the video. This is a rough example and the seek functionality could need some extra work:

Be very careful about that approach - keep in mind that timelines are simply containers/wrappers around tweens, thus their duration is determined by their contents. When you set the duration of a timeline, it simply adjusts the timeScale() accordingly.

 

The problem in your original demo was that your timeline's duration didn't match the videos but of course it appeared to play for the same amount of time because you were mapping its progress() to the video's progress, basically stretching the timeline out to fit. For example, let's say you've got a 2-second timeline where you drop a 1-second tween so it starts exactly 1 second into the timeline (thus it finishes at 2 seconds, the timeline's end). But if your video is 10 seconds like and you just move the progress() of the timeline accordingly, that 2-second timeline will actually take 10 seconds to play, thus your 1-second tween will appear to start at the 5-second spot rather than the 1-second spot (it's effectively playing at 1/5th speed). Think of it like that tween started halfway into the timeline, thus halfway into a 10-second video would be 5 seconds. It's just a logic/ratio thing. 

[miguelesquirol 0 Likes (Newbie)]

15 hours ago, GreenSock said:

Be very careful about that approach - keep in mind that timelines are simply containers/wrappers around tweens, thus their duration is determined by their contents. When you set the duration of a timeline, it simply adjusts the timeScale() accordingly.

 

This is the correct reason I discover after a while... but I'm not sure what's the correct way to fix it. For the moment I added a ticker, a small animation that will be hidden that will last the same time of the video. Is there a better option than this?

[GreenSock 18,255 Likes (Superhero)]

18 hours ago, miguelesquirol said:

This is the correct reason I discover after a while... but I'm not sure what's the correct way to fix it. For the moment I added a ticker, a small animation that will be hidden that will last the same time of the video. Is there a better option than this?

Sure, you can just add an empty tween that's the length of your video, like: 

tl.to({}, {duration: media.duration}, 0);

And then drop other tweens into that timeline wherever you want (use the position parameter). No need for a ticker or anything.