Jump to content
Search Community

My animation using progress() is running slow

miguelesquirol test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • Solution
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. 

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...