Why does grouping animations reduce choppiness?

I’m working on a HUD display that contains a large amount of elements and simultaneous animations, and I plan on exporting it as a html5 doc, its designed to work as a stand alone website all by itself, and I’ve been previewing it in safari.

I have managed to reduce the choppiness, or stutter, in my animations by grouping elements together, but i’m now realizing that the trade off is an inability to make all my elements scale together, which is problematic because my website has to be responsive. Aside from the text boxes the elements are mostly .svg’s and are relatively light.

I’m still quite new to Hype so I’m hoping someone might be able to point out what I’m missing regarding the scaling problem, or some other way of reducing the lag in the animations without having to resort to grouping. Any kind of help or advice would be much appreciated.


In general one animation will perform better than many, though it’d be great to see your document as for the most part modern browsers are able to animate lots of elements without slowdowns. Also let me know what browser/device you’re using.

As for scaling, I assume you mean flexible layout? If you assign flexible layout options to the group, then elements inside can also have flexible layout options (basically if the group changes size, then elements can thus respond).

CriticalDataProject test4.hype.zip (680.4 KB)

Here is the file, as you will notice the HUD in the top left of the screen is quite complicated, and seems to be slowing down the whole project, I would also like to stress that initially all the HUD components where grouped together, and the animation worked fine, its only when I got rid of the the HUD group that the animation quality started to degrade.

I just shot you a DM with a possible solution.

Between using the Beta, tweeking the animations a little, and once again grouping the HUD elements together it seems to be working now, i think some of the animation lag comes from the age of my hardware. Thanks for your help, btw can you disclose when the next update will be? And will it be free? Also I have one more question if thats ok. It still seems, even using the Beta that you sent me, that Hype can manage significantly more animations if said elements and attached animations are placed together in a group, if this isn’t the case the quality degrades quite a bit, so is this deliberate? and grouping elements is how Hype should be used? Or is it a phenomena you are trying to eliminate in future updates?

The beta will be 3.5.3 and a free update; my goal is to get it released this week (but there’s always the possibility of Apple causing approval delays).

Would you mind sending me a zip of the grouped version? I’d be easier to see the difference that way.


CriticalDataProject test4.hype.zip (680.7 KB)

Ok great thanks for the info. Here is the grouped version

4 posts were split to a new topic: Adding multiple actions to custom behavior

Nice looking site.

Would it be more efficient to make an animated gifs for each animation and them move them.


Steve Warby

Cheers Steve,

I tried your idea but it turns out for this kind of project I prefer to keep it as one large animation, it allows me to constantly change and tinker with the animations more easily. However thanks for bringing the GIF function to my attention, hadn’t really used it before but I definitely am now so thanks for the info!