Symbols Loaded from Top to Bottom in Tumult Hype 3.6+

In the prior version of hype, hype would build out the elements based on their order in the timeline. Since the new version has come out, Hype suddenly uses the y position in terms of placing, or registering the elements.

@jonathan are you aware of this? Was it intentional?

I have built a class system that I am using with some large clients on top of Hype and the change has wrecked everything I have built and I am looking at week of recoding.

You may want to check ‘Position with CSS left/top’ in the Advanced Options section of the Document inspector:

Is that different than it used to be? I am going back in to modify the files and everything is breaking.

It would be helpful to know what you were relying on and what specifically is breaking. Previously, a top and left property was set for elements. Now, we use ‘transform’ values to set positions and for animations. The checkbox goes back to the previous method of setting positions. Transforms are more performant than top/left and result in smoother animations in most cases.

1 Like


If you were previously to put a console.log() in symbols onLoad, the order that they fired off would be based on their order in the timeline. Something in the new build has thrown that off completely. I was using this feature to dynamically name my instances, and now it is all haywire.

The top item in the timeline would be first, the second down would be second and so on.

The order in the Element list?

exactly. it is no longer doing that. it fires based on the y/top positioning. it took me hours to figure out what is going on. And i now have to hard code something that had been dynamic.

It is really wrecking things because I have built out multi layered symbols, with symbols nested in symbols, a la Flash, and I was depending on this. I could take advantage of the unique id generation that you built in and then I had built a Hype_Controller, see a previous post, that combined all the code you had built so I could control the timelines of symbols and also the properties of the instances.

I see what you mean. This is a result of changes to make Hype more accessible to screen readers (the DOM structure mirrors the reading order). I'm sorry you were relying on this behavior! While I absolutely feel for you, I think using symbol actions would be a more dependable method (or would have been). If you have a backup of your document you can continue to use the previous version of Hype. There may be a way to revert to the old behavior in the current version of Hype (but I'm not aware of how to do this).

I would not call this a massive bug in Hype, but I do feel your pain!

How do I roll back my hype files?

Or rather my version of hype?

Here is version 3.5.5:
Next, you would restore your document from export.

You can’t open a .hype document in an old version of Hype if it has been already opened in a newer build.

I am trying to build in OOP and you app at this point is not so great for that.
I have done a lot to flesh out the program to make it more robust, towards something more flash like. The developers I am using for staging our dev is running into serious issues in terms of calling for fonts as we are hosting the hype resources on amazon and then presenting on our own dev.

1 Like



I wrote some code that I will post later, that recursively steps up the DOM to create a dot syntax naming structure. It’s a great way to get unique names that make sense. I use classes as generic names and then build from that. Unfortunately it’s too much to implement for the current project but I will keep you posted. Then there is no reliance on features of your app, but there is logic to it for OOP.

Thanks for the rollback, totally fixed the bug.

1 Like

Sorry for being a little bit late to this thread.

The change in DOM ordering is intentional to help improve accessibility, especially on iOS. Relying on how Hype internally modifies and represents the DOM isn’t officially supported because we need to reserve the right to make changes here.

That said, we did include a small valve for projects that might need the old method. You can use this Terminal command for the DOM layout to match the z-ordering:

defaults write com.tumult.Hype2 elementInsertionOrderSortMethod "compareByZOrdering:"

If you need to use the new default method of ordering by top/left, then you can revert via:

defaults delete com.tumult.Hype2 elementInsertionOrderSortMethod

Ah, cool. Though going forward I will not need it based on the ID generator I created. I also came up with a way to track what timeline you were on by writing into the DOM an attribute called currentTimeline, very useful.

Sounds good; I would recommend that as a method as I added the default as a stopgap “just in case” there were major issues since I knew this had the possibility of breaking documents.