Dear Hype friends,
I am very excited to share an interactive concept album/website project that was just released that was built entirely with Hype Pro!
Check it out at www.nowherenation.net/omicron.
The main site (which you can check out at www.nowherenation.net) was also created entirely in Hype.
First link seams to be broken. Second one works. Nice work!
That’s amazing work - very beautiful/atmospheric illustration and animations to go along with the music!
One question I had - I notice that the animations aren’t generally as smooth as possible because they are occurring on pixel boundaries due to the “Position with CSS left/top” box being checked in the Document Inspector. Was there a specific reason you had to use this setting?
Hi, @jonathan!
Thanks for the kind words and thanks so much for pointing this out!
Frankly, I had “Position with CSS left/top” checked because it was on by default, and I didn’t totally understand the ramifications of having it checked! Now that I realize (through your kindly mentioning it) that there is a potential performance boost in smoothness available by unchecking this, I’d certainly like to do so!
I will experiment with this when I have a moment later - but in the meantime, I’m wondering if I can simply uncheck this box and enjoy smoother animations, or will I need to change anything position-wise or otherwise?
How does this setting really effect things and in what use-cases would it be useful?
The default for new documents now is for it to be unchecked, which is better in 98% of cases!
It should only be on by default for older documents (created before v3.5, as this was the only way to do them). The primary downside is that interoperability with other tools/libraries is more limited since most of them use CSS left/top. When unchecked, positioning will use the CSS transform:translate() instead. Typically this leads to both higher framerates and smoother-looking animations as it can interpolate a rendering between pixel boundaries. Every now and then there can be some browser renderings bugs or performance issues with it, depending on content.
Ok, great! This clarifies so much: “it can interpolate a rendering between pixel boundaries”. Many thanks for noticing (and mentioning) this!! 
Sorry, I’m realizing I did have one more important question about the “Position with CSS left/top” setting:
Checking (or not checking) the “Position with CSS left/top” clearly makes a difference in animation appearance. However, what are the performance ramifications? Does it eat up more processing power to do all that pixel interpolation when the button is left unchecked?
There is so much going on in these scenes, I’m afraid browser stability may be a big issue (which may have been the reason that I ended up leaving it checked).
So, I’m wondering - how does this button affect performance?
Thanks again for the clarifications on all this!
In many cases it is more performant because it can do simple compositing instead of a re-layout, which can happen on the GPU.
That said, there’s been a lot of browser optimization on the top/left side over the years. There’s always tradeoffs and a lot depends on your content. I recommend testing, but generally speaking unchecking the box (using transforms) will improve either the visual results or actual performance.
Ah, thanks for that!
I did a bunch of testing last night.
Unfortunately it’s a mixed bag with my project. Strangely, the project (when it was exported with “Position with CSS left/top” left unchecked) was fantastic on every scene on my iPhone X (on both mobile Safari and mobile Chrome). But on both my wife’s MacBook Air and on my MacBook Pro, on Chrome about 70% of the scenes were fantastic, but 30% were really rough and choppy. Thankfully the browser never crashed, but it sure seemed like it was getting close.
Here is a short screen vid showing how bad it was on one of the scenes.
I now remember doing a bunch of testing on this a long time ago and determined at the time that my overall stability was increased by leaving the box checked.
However, I’m bummed that it was so fantastic on mobile and so bad (in only a few scenes) on desktop.
I guess I’m wondering - is there any way to selectively apply this setting to individual scenes or to an individual layout (desktop only, for instance)?
If I could impose “Position with CSS left/top” on only the scenes that need it (and only on desktop), then the whole project would look great! If not, I’m going to have to accept “Position with CSS left/top” as my only option.
Thanks again for your input on this!
Unfortunately it is a per-document setting and there’s no way to switch it.
You might get mileage out of unchecking “Use WebKit graphics acceleration” and see if that makes any difference, as this is yet another rendering mode .
Otherwise the only thing to do would be to do two exports and have some code somewhere that determines which page to serve if you wanted both.
Got it - thanks for the thoughts (and the options!).