Jump to content
Search Community

can onStart call a function of an object?

PawleyBoboli 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

I have created a SoundManager object which loads my sounds and has functions for playing them.  Most of the time, they are various click-sounds attached to buttons, but in some cases, there are longer sounds associated with a TimelineLite animation.


I am trying to trigger them with this:

var tlboxBtn = new TimelineMax({onStart: $EV_SoundManager.playSFX, onStartParams: ["glitch020"], paused : true });
// other animation items added to the TimeLine... then...

element.grpanimation = tlboxBtn;

The first thing in the "playSFX" function of $EV_SoundManager is a log to the console displaying the name of the soundfile to play.  This is working for all calls triggered from button clicks, but not when this timeline runs.  No sound and no log statement.


I could just create an anonymous function, call that from the TimelineMax, and have it trigger the function in the $EV_SoundManager object, but that seems like a step too many.  Is there a better way to do this?


Any help is appreciated.


Link to comment
Share on other sites

Hi Kevin,


Well it depends on how the library you're using is constructed, but it caught my attention that you're using $EV_SoundManager.playSFX instead of $EV_SoundManager.playSFX(), that should be the most common syntax, unless the specific playSFX key of that object returns a function, but like I said that depends on how the library is constructed.


What you could try is create a public function and pass the specific parameter to it:

var tlboxBtn = new TimelineMax({onStart:playSound , onStartParams: ["glitch020"], paused : true });
// other animation items added to the TimeLine... then...

element.grpanimation = tlboxBtn;

// the callback gets the specific sound and calls the playSFX method on it
function playSound(sound)


  • Like 1
Link to comment
Share on other sites

Ah-HAH!  Rodrigo, your response led to the right answer... though it is not what I expected.  You are right that I should be using $EV_SoundManager.playSFX() but I must also include the parameter for the sound file inside the parenthesis (just like when I use it for buttons on the page)  and forego using the onStartParams element.  In all the examples I have found, it seems that the parameters must be put in the Timeline call to a function as a separate attribute/value pairs, but in this case, this worked:

var tlboxBtn = new TimelineMax({onStart: $EV_SoundManager.playSFX("glitch020"), paused : true });
// other stuff...

element.grpanimation = tlboxBtn;

Not sure I understand why this should be different, but I appreciate your help.



Link to comment
Share on other sites

It seems odd that that works, but you're the one seeing it work :)


I think you're first approach was closer to what I'd expect to work with perhaps the addition of the onStartScope value applied:

TimelineMax({onStart: $EV_SoundManager.playSFX, onStartParams: ["glitch020"], onStartScope:$EV_SoundManager, paused : true });
  • onStartScope : Object - Defines the scope of the onStart function (what "this" refers to inside that function).



Again, if you got it to work, great. Just wanted to point out this additional parameter

  • Like 5
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...