Jump to content
Search Community

Adding tweens to timelines synchronised with audio/video with scrub bars

Pebble test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi

 

I posted on the forum a few days ago with a problem about synchronizing audio/ video with animation and scrub bars.

 

That issue has been solved and the codepen is here: 

See the Pen rryZaQ by dipscom (@dipscom) on CodePen

 

Thanks a lot for that, it was a great help.

 

Now I am trying to place my tweens on a timeline at exact points and it isn't working correctly.

 

I have audio, animation and scrub bars all synchronized and working correctly but I want to put tweens at specific points in the timeline so the animation matches the music or narration correctly. I have tried absolute positioning and labels but without success and I was hoping someone could help me with this.

 

The codepen is here:

 

 

In this codepen for example I want the first tween to start at 1 second and the second tween at 2 seconds. Why isn't this working?

 

Many thanks

 

Pebble

See the Pen RGgJrA by anon (@anon) on CodePen

Link to comment
Share on other sites

Hello Pebble,

 

It's me again! And once again you're quite close, just missing a little detail.

 

The pen you have provided is working correctly. The issue is you are trying to correlate a moment in time with two different spans of time.

 

Your timeline is, at the moment of writing, 3 seconds long but your soundtrack is 11 seconds. It is stating the obvious to say they are not the same length. And that's where your issue lies.

 

When divide the current audio time by the total audio duration...

aud.currentTime/aud.duration

...you get a number between 0 and 1. The timeline's progress is also a number between 0 and 1. That's why they match nicely when you tell the onUpdate to change the timeline's progress to match the result of that audio division. And is also why your codepen is behaving as it is. At 0.3 of 1 progress at the audio track the timeline will be at it 0.3 of 1 progress but your timeline is only 3 seconds long so it will be moving far slower than you thought it should.

 

In order for the tweens of the timeline to trigger at the precise moments, you need the timeline to be the same length as the audio. 

 

See the Pen ALrgxB?editors=0011 by dipscom (@dipscom) on CodePen

 

Does that help?

  • Like 1
Link to comment
Share on other sites

Hi Dipscom

 

Thanks for your prompt reply.

 

Yes I understand what you are saying but one thing is confusing.  The length of my timeline is now 13 (1+2+10) seconds and it works fine whereas it should be 11 seconds.

 

Why is the last absolute value 10 seconds rather than 8 to make it 11 seconds?

 

Many Thanks

 

Pebble

  • Like 1
Link to comment
Share on other sites

Hello, hello!

 

The length of the timeline is 11 seconds, the sum is actually (1+10).

 

Yes, very confusing, right?

 

In this particular example we are using absolute values for the position parameter. The last tween a has a position parameter of 10, meaning, it will be added after waiting 10 seconds. Its own duration is 1 making it a total of 11 seconds. Everything before that 10 second mark bears no influence on the length of the timeline because when adding it all up, it doesn't get to 10 seconds. It would be the same even if they didn't exist. If you were to use relative values for the position parameter or had other tweens that would add up to more than 10 seconds then, it would be a different kettle of fish.

  • 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.
×
×
  • Create New...