Playing symbol timelines from within other symbols

I’m using some js I found on this page to play timelines inside symbols from buttons on the main timeline or from buttons inside the symbol who’s timeline is being triggered. It seems to work for both situations.

var symbolInstance = hypeDocument.getSymbolInstanceById(‘mySymbolInstance’);
symbolInstance.startTimelineNamed(‘Main Timeline’, hypeDocument.kDirectionForward);

However I can’t get this to work if the button is inside one symbol but I want to start the timeline inside a different symbol (which is not inside the first symbol). In other words, I have two symbols on the main timeline MySymbolA and MySymbolB. I want a button inside MySymbolA to start the timeline inside MySymbolB. Try as I may the code that works for the other situations above won’t work in this situation.

So if I put this code on a button inside MySymbolA

var symbolInstance = hypeDocument.getSymbolInstanceById(‘MySymbolB’);
symbolInstance.startTimelineNamed(‘Main Timeline’, hypeDocument.kDirectionForward);

It does not play the timeline of MySymbolB.

Does anyone know what the problem might be?


you can use custombehaviors that can be triggered from anywhere …

1 Like

Here’s a quickie on Custom Behaviors:

More reading:

1 Like

It should using that logic. Are you seeing any errors in your console?

Also, are you creating a function on mouse click (for example) attached to the button inside “mySymbolA”.

If you share your document then we can see better what’s happening.

FYI. You can share it by dragging a zipped copy into the reply box as long as it’s under 3MB

I know the others (@h_classen and @Daniel) have suggested going down the “custom behaviours” route which is fine but I’m sure you’d want to know why it’s not working by just using the API :slight_smile:

1 Like

This should work.

Atleast from a outside the symbol even if the symbols are instances and not duplicates.

Buttons in Instances would need to use diferent coding to get the parent symbol.
There are a few ways to do it though…

Quick example ( by no means the only solution)
These Symbols are Instances not Duplicates.

For buttons outside

	thisButton = element.classList[1]
 var symb  = hypeDocument.getSymbolInstanceById(thisButton)
symb.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)

Uses the button class name -> Symbol ID

Button inside.

 var symb  = hypeDocument.getSymbolInstanceById(element.closest(".symbl").id)
 symb.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)

Uses .closest() element with className. ( Both Symbol instance has the same className ) (47.1 KB)

1 Like

Thank you all for your helpful suggestions. My apologise for the delay, I’ve been away for a couple of days. I have attached the project in question.

The symbol who’s timeline I want to trigger is called “Bug_Box_Glow” and is the top layer in the project.

The button which I want to trigger “Bug_Box_Glow” is inside the “Timeline” symbol which is on the second layer from the bottom in the project.

Within the “Timeline” symbol there is a button called “Button_Speckled_Wood_Butterfly” This has a On Mouse Down Action which runs a script called “Bug_Box_Glow_Play()”

So I need to trace down why the “Button_Speckled_Wood_Butterfly” button will not trigger the “Bug_Box_Glow” symbol’s timeline. I can’t see what’s wrong with what I’ve done here, so I’m guessing it’s something glaringly simple.

Many thanks for any help on this. (1.2 MB)

Lol… you have a pause timeline action at the beginning of the Main Timeline on Bug_Box_Glow

Ah. I didn’t realise a pause over-rides a script to play the timeline. The reason I put a pause there was that without one, the timeline just plays on it’s own, without any trigger. But I wanted the timeline not to play until triggered. How can I stop a symbol’s timeline from playing without using a pause action?


The pause does not really override the script .
In the script you have just put a request to play a timeline.

There is a pause on that timeline. The timeline starts to plays including the instruction to pause.

It does not do that here…?

But normally when you add a symbol it will either have a symbol Action associated with it to start it’s main Timeline or insdie the symbol the wil be a start main timline on symbol load.

Yours has neither so you must have removed one or the other at some point…

Thanks so much for your help on this. I am fairly new to Hype coming over from Edge. I definitely didn’t have a play action on the Bug_Box_Glow timeline, but it was playing back in a loop in the browser as soon as I created the tween. I can’t image what happened there, but obviously it was something I did accidentally.

Thanks again for your help!

1 Like