Persistent Symbol Timeline Control

Ila · January 13, 2021, 11:19am

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!

MarkHunte · January 13, 2021, 11:53am

Please post the example project.

Ila · January 13, 2021, 1:41pm

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.

h_classen · January 13, 2021, 1:42pm

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

Ila · January 13, 2021, 1:50pm

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)

MarkHunte · January 13, 2021, 1:54pm

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)|

Ila · January 13, 2021, 2:07pm

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?

MarkHunte · January 13, 2021, 4:17pm

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.

Ila · January 14, 2021, 1:39pm

This trick actually solves the problem!

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

grzesiek.rogala · August 13, 2022, 6:29pm

What does the [0] after sym mean and what is it's function?
sym[0].startTimelineNamed('domino', hypeDocument.kDirectionForward)

Thanks for your help

MarkHunte · August 14, 2022, 12:48am

This is explained in the thread on what we are doing and why…

Objects in an Array each have an index number.
Ararry index numbers start from 0 not 1 but index 0 will mean array object at position 1.

If you want the object at position 2 you would use the index number 1. So on and so forth.

There are Javascript worded commands to get an object at index #number

But using brackets with a number inside is the common short code to specify an object at the index you want