Using GSAP for slideshow timing

[DrDave65]

I am working on an interactive animation slide show. Currently I use the javascript timeout function for slide duration. I use Jquery for slide transitions and gSap for animations and associated timing.

I want to expand the development to use the Web Audio API to create and play sound effects and other audio such as background music and narration. The API includes timing that is precisely controlled and syncs well with other audio.

My question is what should I use for a master timer? As is well known, the timeout function is great for offloading the main thread but the timing is not very accurate. But I don’t know how accurate the gSap timer is.

I believe I can get the best results by using gSap timeline as a master control to control the slide timing and a separate inner timeline to control the animation timing for the given slide relative to the slide start time. The master timeline would control the start/play and pause for the background music and narration for each slide. Sound effects in a slide would start and stop with the slide animation tweens.

 

Am I on the right track or is there a better way?

 

Will I be able to track the entire show using the master timeline?

 

Thanks

 

DrDave65

[Cassie]

Hi there Dave, there should be no need to use timeouts and GSAP together. It certainly sounds like you're on the right track and a timeline would serve your needs. I'm afraid I can't offer more specific help without more understanding of your project, or some code.

I'm not entirely sure what you mean by this, GSAP timelines have a pretty extensive inbuilt callback system, you can also fire of functions at specific times, track the progress, pause, stop, slow down. Pretty much anything you can think of you can do!

Quote

Will I be able to track the entire show using the master timeline?

 

Hope this helps!