Persistent Symbol Timeline Control

Goodmorning everyone,

premise: not having much experience in programming, I hope someone can help me better understand how the functions and symbol instances work in Hype.

Here's what I'd like to create:

a persistent EYELET symbol that you can control the “domino” timeline of depending on the slide I'm on.

When loading slide A, I would like the "domino" timeline of the EYELET symbol to start, in order to be able to see the animation of the persistent symbol from start to finish.

When loading slide B, I would like you to go to the second "s" of the EYELET symbol timeline, in order to see the symbol on slide B when the animation has already been completed.

Here's what I've set up so far:

On scene A, in the “On loading scene” menu I set the Action “Run Javascript”, Function “startDomino”.

Here's how I wrote the function:

hypeDocument.getSymbolInstancesByName ('EYELET')
symbolInstance.startTimelineNamed ('domino', hypeDocument.kDirectionForward)

On scene B, in the “On loading scene” menu I set the Action “Execute Javascript”, Function “endDomino”.

Here's how I wrote the function:

hypeDocument.getSymbolInstancesByName ('EYELET')
symbolInstance.goToTimeInTimelineNamed (10, 'domino')

With this setting, once in the browser, in slide A the persistent EYELET symbol remains static, so the animation does not start.

Where is the mistake in this setting?

Thanks in advance for your attention and for your help!

Please post the example project.

Hello @MarkHunte,
Thank you for your attention.

The example of what I explained is in the first two pages (A1 and B1).

per forum.hype.zip (70.5 KB)

On pages A2 and B2 I tried another method of achieving the same thing, setting Symbol Actions, and the effect is more or less what I would like to achieve.

The problem of example 2 is the anomalous behavior of the symbol once I return from page B2 to page A2: as you can see, the dominoes are all upset (the last bar on the right has dropped compared to the others) and the animation changes sensibly.

this'll return an array. you may use an index to get the instance that you like or use getSymbolInstanceById which'll return a unique instance

2 Likes

Hello @h_classen,

Thank you for the suggestion.

I tried your option too, but the result is the same: the symbol in A1 remains static, its "domino" timeline does not start...

per forum-2.hype.zip (54.6 KB)

Also

You have

  hypeDocument.getSymbolInstancesByName('OCCHIELLO')
 symbolInstance.startTimelineNamed('domino', hypeDocument.kDirectionForward)

you are not declaring a var to hold the result and you are not actioning on any symbol.

You should have ( if using index ):

 var sym = hypeDocument.getSymbolInstancesByName('OCCHIELLO')
  sym[0].startTimelineNamed('domino', hypeDocument.kDirectionForward)

if by id

 var sym = hypeDocument.getSymbolInstanceById('domino')|
 sym.startTimelineNamed('domino', hypeDocument.kDirectionForward)|
1 Like

Thank you! Now it works!

The problem is the anomalous behavior of the symbol once I return from page B1 to page A1, the same anomaly that happens to me in example 2, with symbol Actions: as you can see, the dominoes are all upset (the last bar on the right has dropped compared to the others) and the animation changes sensibly...

per forum-3.hype.zip (70.5 KB)

Could it be a problem related to page change and object physics?

Well once I change
sym.symbolInstance.goToTimeInTimelineNamed(10, 'domino')

to

sym..goToTimeInTimelineNamed(0, 'domino')

???

the 10s to 0s in the end function and remove the symbolInstance

I think I see what you are seeing.

The last domino sits lower in the scene.

Not 100% why it is doing it and my vague guess will likely confuse you more.
Maybe @Daniel can have a stab at it since he will be more aware of the interaction of MatterJS and Hype. Which is where I think the issue lays.





update

A quick/dirty fix .

In the domino timeline, give each element a top keyframe at the 0s position.
This will be the top position at every start.






3 Likes

This trick actually solves the problem!

Great, your advice was very useful, thank you very much!

1 Like