Jump to content
Search Community

animation, precision and music

benoit 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,

 

What is the best way to synchronize an GSAP animation and a sound music ?
I make some experiment with

setInterval(function () {
    console.log(audio.currentTime); // will get you a lot more updates.
}, 1000/50);

But what's next ?

var tl = new TimelineLite();
/*
…
*/
tl.progress(audio.currentTime/audio.duration);    

An option like useframes:true looks great but I am not sure to do it right.
If some one could give me some GSAP base to make a good start.

Link to comment
Share on other sites

I think you will need to experiment a bit to see how smoothly that works.

Frankly I think you will just need to start both the sound and animation at the same time and hope for the best. Perhaps on a very infrequent basis you can query the currentTime of the audio and adjust the animation.

 

FWIW I would suggest using TweenLite.delayedCall() over setInterval. It is much more accurate and runs off the same ticker (heartbeat) of the animation engine

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/delayedCall/

//call a function once after a delay
TweenLite.delayedCall(1000, someFunction);

//call the delayed call many times
function someFunction() {
  //do stuff
 TweenLite.delayedCall(1000, someFunction);
}

//to kill

TweenLite.killTweensOf(someFunction)
  • 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...