Start a symbol's timeline from another scene (possible?)

I have two scenes in my project (Scene 1 and Scene 2) and Scene 1 includes a persistent symbol only added to that scene. I can start the symbols’s timeline with this script triggered from within the same scene:

hypeDocument.getSymbolInstanceById('Progress').startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);

However, I would also like to start the symbols’s timeline from the second scene. I added the script above to the second scene but it does not work. Is this even possible? (39.3 KB)

I could add this symbol to all scenes and just hide it somehow in the second scene but I want to have the symbol in Scene 1.

Thanks for your help! (38.5 KB)

i’d say, if the symbol is just on one scene it does not have to be persistent …

anyway … you can save the state on the click-behavior and check it on sceneload …

to mention: @MaxZieb wrote an extension to cache the symbol-object, but I’m not sure at the moment if you can access the symbol-object if it is not on the active scene …

1 Like

You actually cannot because the Hype runtime (re)moves the symbol from the scene and invalidates the access or rather the command hypeDocument.getSymbolInstanceById only return symbols on the current scene. Additionally, behind the scenes (in the HTML) if you inspect it: The persistent symbols HTML is moved (detached and reattached) into an invisible DIV node.

You can check by logging in your Button function: console.log(hypeDocument.getSymbolInstanceById('Progress'));

What is your goal?

To store information in a symbolInstance… then Hype SymbolCache is for you.

1 Like

Here is how Hype Symbol Instance VS: Hype Persistent Symbols are moved around:


Here is what is happening in your case:

Both animations also have a regular symbols in them to illustrate that they are always destroyed and recreated. This goes even a bit further on the API-Side because everytime you request a symbolInstance the Runtime returns a JavaScript Object with the API but it’s recreated everytime you call the hypeDocument.getSymbolInstanceById or symbolInstance.getSymbolInstancesByName. So, in contrast to hypeDocument the built in symbolInstance is a hostile place to store state. If you want to override the API side of storing state you can use Hype SymbolCache as it works as an intermediary and creates the symbol API for each symbol once and return the same JavaScript Object (Symbol-API) in subsequent calls. That allows you to store information in an object-oriented fashion.

BTW You can always store information in a centralized fashion and run symbols from that central data store (like hypeDocument.customData). The reactive movement uses this approach and trickles down information from a data store to all components on the render tree. The basic premise being that its one way much like in CSS (Cascading Style Sheets) don’t allow parent sectors.

1 Like

Interesting use case! I can’t recall our reason for not allowing a persistent symbol to be looked up in this manner, especially when we’ll keep running its timelines in the background.

Another workaround would be to use a custom behavior. You could add one inside the persistent symbol (I call it “starter”) that starts the main timeline. Then you can either use the Trigger Custom Behavior… action or the hypeDocument.triggerCustomBehaviorNamed('starter'); API. (49.0 KB)

(I extended the animation length for testing)


Works like a charm! Thanks Jonathan!

1 Like

Thanks for the detailed explanation Max. I’m working on a project that has the overview of all scenes in the first scene and need some kind of progress tracking to be displayed in the first scene based on various user actions in other scenes. I will look into your HypeSymbol Cache as I wast to learn more stuff you can do with Hype.

7 posts were split to a new topic: Converted persistent symbol started on main timeline

I will be honest I did not read this thread from the beginning so missed this.
Not that it is any better but you can put the symbol instance in a hypeDocument.customData var.

for instance on symbol load.

hypeDocument.customData.sym = hypeDocument.getSymbolInstanceById('Progress')

You then have free range to the symbol from code without hard baking a custom behaviour.

i.e on scene 2’s button/code

hypeDocument.customData.sym.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);

Symbols.hype (52.6 KB)


this does only work, if the symbol has been initiated once before the custom behavior is triggered¿!

That’s a really cool technique! If you are doing it on symbol load you don’t even need to bother giving the symbol an ID; the “element” passed into the function is the symbol. So you could do:

hypeDocument.customData.sym = hypeDocument.getSymbolInstanceById(;

Yes, but this is true of any other solution - a persistent symbol isn’t instantiated until it is first shown.

(There’s definitely an argument that this should not be the case, but it brings to question a lot of other lifecycle behaviors)