INTRODUCTION

Tumult Hype

Tumult Hype is also an authoring tool for interactive web animations, and in that regard similar to Adobe Animate CC. However it relies on DOM manipulation and not on Canvas animations, so from a technological standpoint it is quite different. It can rather be compared to the late Adobe Edge Animate (yes, confusing, I know…). Tumult is an independent company, so you need to buy a different license. In contrast to the Creative Cloud, it is not a subscription based model but a one time purchase. You can find more info on that on https://tumult.com/hype/

Visual Design Surface

Hype comes with a visual design surface, giving you full creative control. It has a more modern looking interface using panel tabs. You can compose your composition visually on the so-called stage and use the timeline to create even complex animation choreographies. One of the biggest advantages is the Actions panel that allows you to add simple interactivity very designer friendly in an intuitive way. Also the stage is already a browser instance so it is pretty much “What You See Is What You Get” (WYSIWYG).

 
Tumult Hype
The visual design surface in Tumult Hype

With the latest version 4 release, Hype also now allows you to create vector animations such as shape morphings and line drawings within the tool (using an SVG context within DOM). This is very promising and has great potential. As of now, you can however only animate shapes created in Hype.  

HTML DOM Manipulation

With relying on DOM manipulations, Hype has a different approach than Animate CC. In some cases, this can be an advantage, for example being able to use CSS, interact with other HTML elements, include input or form fields etc. Also you can use content flow for responsive behavior. On the other hand you also have to live with the limitation HTML DOM includes, for example relying heavily on image assets. With the soon to be released version 4 of Hype it will feature a vector tool, allowing you to use real shapes and shape animations based on SVG within the DOM animation – this promises to be pretty expressive and powerful. Note that you can already use shapes from Illustrator in Hype as background images for div containers, which will look sharp on all display resolutions.

Design without Code

Hype claims to allow “Design without Code” and it truly does – to a certain degree. For the basic use cases you can essentially compose even pretty complex choreographies without having to write a single line of code. Once you get the hang of the interface it is pretty intuitive as well. You really feel that Hype sets a great focus on providing user friendly workflows that are well thought through and that make sense. In case you need to add more complex logic to your projects you can create custom JavaScript functions and rely on an API, which is handy but clearly not as extensive as Adobe Animate / CreateJS.

Flexible and Adaptive Layouts

In terms of responsive behavior, Hype has some very handy on board features. First of all, you can set the entire composition to relative values (% instead of fixed pixel values). You can then define the responsive behavior for single elements and groups individually, for example remaining in the center or being attached to the left or right side. You can also define whether containing elements should be scaled etc. using the interface. Visual indicators help you to understand the different settings. It takes a bit to really understand how it works but once you are used to it, making your compositions responsive is pretty straight forward. In case flexible layout is not enough you can create layout variations with  a single click. This makes a copy of the current scene and you can go ahead and modify the layout, exchange assets etc. to optimize your layout for different screen sizes. In addition to that, Hype supports resolution dependent asset loading. You can manually include assets for different device pixel ratios – or if you use high res assets in the first place, Hype will automatically generate low res assets for you on export.

Relative Timelines

A unique feature within Hype is the support of multiple and even relative timelines. A pretty handy concept in fact. Multiple timelines allow you to create different animations usings the same assets and then using triggers etc. to play the respective variation, for example depending on user selection or other variables. Relative timelines allow you to create animations that dynamically use the current state as starting point for your animation, not a static value. An example could be elements that move relative to each other when being selected. An animation that would require pretty complex calculations with static animations, but with relative timelines it is a piece of cake!

Physics

Probably not a feature that you use in most of your projects but still an interesting notion is the implementation of a physics engine in Hype. You can define things like gravity, direction and how different elements should be affected (if at all). This allows you for example to create games in an angry birds style etc.

Mac OS only

One of the biggest impediments regarding Hype is that it is available for Mac OS only. It is developed natively for Mac and there is no Windows version available or planned in the near future.