Today I’m pleased to release a set of tutorials built in Tumult Hype. They are hands on documents for with tricks and techniques for animations, elements, timelines, and easing. You can download these tutorials here.

Please note that you’ll need a copy of Tumult Hype to open these documents (we have a 14 day trial available).

First-person Learning

My goal as Tumult Hype’s support dude is to make sure everyone feels comfortable within the application. Nothing makes me happier than to see one of our users turn from beginner, to novice, to pro during interactions via email and on the forums. These tutorials released today join a growing body of articles and guides, and complement Tumult Hype’s documentation.

The tutorials consist of a series of demonstrations. For example, instead of an explanation of timeline actions, you can play with a working example.

What else?

Each scene takes a focused approach to topics such as elements, timeline-based animations, and easing effects. Even if you’ve been using Tumult Hype since the beginning, you’ll learn something new! The documents are split into these topics:

• Intro to Animation
• Intro to Elements
• Intro to Easing
• Intro to Timelines

Before you get started, I recommend reading the documentation. It’s an excellent way to quickly learn the basic workings of the program. My hope is that the tutorials turn your technical knowledge of the application into practical knowledge you can make use of in your projects. To navigate these tutorials, click ‘Show Scenes’ at the top, and click through the document. You can play and pause each scene’s main timeline by clicking the play button at the bottom left-hand area of the program’s window.

So, go get the tutorials! And please email us (or via @hypeapp , too) if you have any suggestions for future topics!

Whether you’ve been using Tumult Hype since 1.0, or you’re just getting started, I promise you’ll learn something. If you’re hoping to learn more, here are a few places to explore:

• Tumult Hype Documentation
• Knowledge Base Articles
• Tutorial Walkthroughs
• Videos

The post Tutorial Walkthroughs: Explore new techniques within Tumult Hype appeared first on Tumult Company Blog.

We’re fans of data visualizations and infographics at Tumult, so we’re naturally thrilled when we see Tumult Hype being used by news organizations like Reuters and the LA Times. We last explored infographics here with Bart De Neve’s infographics for De Standaard.

To continue the conversation, I (virtually) sat down with one of our favorite Tumult Hype creators to dig into his process.  Konstantinos Antonopoulos, the handsome man pictured on the right, creates infographics for in.gr, a popular news website in Greece. More than just visualized data, his documents lead users down a storytelling path, with more narrative than simply data. He was kind enough to offer his thoughts on

• Iconography for user interaction
• His testing process, and perhaps most importantly
• Starting with pen and paper.

I hope this conversation is helpful for others working with visual data. If you would like to explore his Tumult Hype documents, read on.

Daniel: Infographics can be so open ended, so I’m wondering how you approach the creation of clickable and tappable elements in Hype. I notice you use a lot of plus (+) and arrow iconography to encourage interactivity.

Konstantinos: The infographics I create for in.gr are usually structured in order to tell a story. They are not executed as data visualization, but as multimedia storytelling, where the data, the pictures, the text and the multimedia are there to support the story – but the narrative is in the spotlight.

And this narrative is, really, a bunch of decisions I have to take before I even fire up Hype: what do I want to say? How do I construct my story? How can I support my storytelling? How can I enrich it? How can I break it down, scene by scene, for the user to understand and better interact with it? How can I make sure that it tells the story AND it is clear and uncluttered, concise and to the point?

Iconography helps with that a lot: it is a guide for the users to take them down the storytelling path. The icons usually trigger timelines inside every scene, where each timeline has an extra element to the story: it may be more text, another picture, data or multimedia. This method helps me keep each scene clear on first visit (a title, a descriptive text and a picture) and have a lot of additional content available on a tap or click.

I try to use as little animation as possible, since I do not want it to be distracting from the focus of the story. These are news items and the story always needs to take the front seat. Hype is a fantastic story-telling tool that gives me much freedom to control the flow of information to the user.

What technical steps (if any) do you take to prepare your Hype document for display on the web?

Most of the technical work is a repeated process: the javascript to connect the scenes together (I am using different .hype files for each scene) and the editing of the .html files to include some specific code for the SEO and the Nielsen ratings are a daily routine.

Some of the elements are prepared in Illustrator (yeah, old habits die last…) and are exported as .png images, so that requires some attention.

Working with fonts is a routine that I am paying extra attention. While I have not finalized the infographics specs, I am using Open Sans in these latest graphics and I am paying extra attention to getting the typography right.

For a visual journalist who does not know html, css or javascript, I’d say that Hype itself, as well as its support, have simplified lots of technical processes and have taken the load off me many times.

But, overall, the thing that matters the most is testing the infographics out in all the browsers and all the formats. The text rendering in Firefox, for example, has produced some mistakes for me in the past and, from that moment on, I usually take all the time needed for previewing.

Konstantinos’ recent work.

And finally, do you have any tricks to share with other creators?

It is not a secret in the community that every infographic begins with pen and paper. The thoughts are becoming scenes and timelines and the narrative is built. Using a sketchpad or a visual layout tool before firing up Hype makes the job so much easier.

Mastering the timelines is essential in controlling the information. Timelines in Hype are a fantastic concept, are very easy to learn and a very powerful companion to the scenes.

For the moment, I am playing it safe and not using any of the Hype features that are supported only by modern browsers – but I will definitely try to incorporate some filter effects (blurs, especially) in the future graphics.

I am also looking for inspiration among the community and I’m trying to keep up with their creations – and, especially, the infographics artists among them: Les Hewitt, Cath Levett, Bart De Neve and the rest of the news artists and visual journalists are producing amazing stuff and I am very inspired by their work and thankful for them sharing it.

We hope you enjoyed this brief discussion. Konstantinos has made a few of his Tumult Hype documents available for download. If you have any questions for Konstantinos, you can find him at @konstantinosant.

The post Notes from an Infographic Craftsman: Interview with Konstantinos Antonopoulos appeared first on Tumult Company Blog.

element.style["-webkit-transform"] = "translate(xPos, yPos)";

than this code:

element.style.position = "absolute";
element.style.top = xPos;
element.style.left = yPos;

Both will change the displayed element position on a web page, though if performance is no object you may choose to semantically differentiate the techniques for different purposes. Translate also allows non-integral values which can result in smoother animations when moving an element slowly over a long period of time.

I still found the advice of always preferring to use transforms surprising; a while ago in developing Tumult Hype I had run some tests on the two different techniques and recalled transform not necessarily being faster. But, browsers have changed a lot since then. I couldn’t find any readily available benchmarks online, so I decided to make a new test and measure to see whether the advice of always using transform was valid.

The Benchmark Test

For my test, I wanted to compare various aspects involved in changing positions and compositing a page. These are:

1. transform:translate vs. position:absolute and top/left
2. CSS Transitions vs. custom JavaScript heartbeat animations using requestAnimationFrame()
3. Graphics acceleration on vs. off (forced via rotateY hack)
4. Opaque elements vs. partially transparent elements

The test itself is relatively simple, it generates n boxes and animates them from point A to point B. It runs the 16 combinations serially. I’ve posted the test online so others can run it and pick it apart if need be:

https://github.com/tumult/PerformanceBenchmarks/blob/master/MovingBoxes.html

My desktop testing system is a 27″ iMac (Mid 2011) with a 3.4 Ghz Intel Core i7 processor and AMD Radeon HD 6970M 1024 MB Graphics card. I also tested on an iPad Mini and iPhone 5. FPS on the desktop were taken using Quartz Debug and Instruments for iOS. I ran the test several times to make sure the results were repeatable. The FPS itself has some degree of eye-balling; the main point was to relatively compare various techniques.

Results

All numbers are in frames per second. Because Firefox’s performance was too slow to draw conclusions, I re-ran using only 500 boxes to help bring out results from the tests. I also used 500 boxes for testing Mobile Safari for the same reason. For fun, I ran IE 10 in VMWare to see how it performed (surprisingly well), but don’t count the results as valid since it isn’t a real world setup.

Download as: Image | .numbers document

Primary Conclusions

• Setting the top/left properties will be faster than using a transform if you are not using transitions
• If the target is WebKit, the fastest frame rates will come from using transitions with the translate property, and forcing graphics acceleration for Safari/Mobile Safari (Chrome automatically does this)
• If compositing non-opaque items, forcing graphics acceleration in WebKit will have a huge performance boost in Safari/Mobile Safari and a modest boost in Chrome
• If compositing only opaque items, forcing graphics acceleration in WebKit will have a negative impact on performance

Other Notes

• The rotateY(0deg) method to force graphics acceleration has no significant effect on Firefox
• Safari is ~1.5x faster than Chrome across the tests
• Firefox is ridiculously slow at this test, even compared to IE 10 running through VMWare — Update: see below.

Q: What does Tumult Hype use for its animations?

Unfortunately there’s no straightforward answer! Tumult Hype v1.6 prefers to use top/left positioning with requestAnimationFrame() and graphics acceleration enabled. In some cases we may automatically disable graphics acceleration or use transforms to workaround specific browser bugs. There’s a checkbox in the Document inspector to disable graphics acceleration if manual intervention is required. On iOS we cannot use requestAnimationFrame() at all due to a Mobile Safari bug*, and clearly cannot use it on older browsers because it’s not supported. Tumult Hype v1.0 used transitions when available for the best performance, however we encountered issues keeping animations synchronized, and this technique would not work with newer features such as our bounce effect and pausing/resumes/go-to-time features so it was abandoned in v1.5.

Q: Why shouldn’t I always use CSS Transitions?

• They are difficult to programmatically manipulate.
• They are missing many features which might be required for interactivity (getting current positions, synchronizing with other animations, pausing, etc.).

David Poyner has an elaboration I agree with.

Q: Why use transforms if not using CSS Transitions or CSS Animations?

• You may encounter browser bugs*. They go in both directions and sometimes using top/left is the only workaround.

I recommend reading Zachary Johnson’s comment for more information.

Q: Why not always use the graphics acceleration hack?

• It’s a hack! Browsers may be able to make more intelligent decisions, and in some cases are faster (opaque elements).
• You may encounter browser bugs*.
• It could have battery life implications.

Further Testing

This is admittedly a simple and singular test I hope accurately covers general performance characteristics which might be seen in the real world. Because the GPU is a factor, it would be interesting to test against different hardware. Completely missing is a test on CSS Animations, but my assumption is their performance characteristics are the same as transitions. With more time, I would vary box sizes, textures, and numbers. I would also test different effects known to cause performance issues such as box shadows and blurs. I’d also test against the latest WebKit nightlies and Chrome Canary builds, perhaps compare against older versions of the browsers, and run a native tests on Windows and Android. I’m also curious about scale performance vs. width/height.

End Note

There’s no single path to best performance where web browsers are concerned. The first step in achieving performance for your site is measurement.

* List of Related Browser Bugs We’ve Hit

<rdar://problem/9764859> 3d webkit-transforms intersect elements inconsistently
<rdar://problem/9973514> Hardware compositing breaks full screen video in Safari 5.1
<rdar://problem/10346853> REGRESSION: webkit-transform:rotate causes other css properties to not change
<rdar://problem/10506553> Box-shadow not always drawn when an element is rotated and animating
<rdar://problem/10543798> Table border not drawn when there’s a 3D transform
<rdar://problem/10737092> contenteditable cursor displayed incorrectly with translates and 3D rotations
<rdar://problem/10786551> 3D transformed div has aliased/jagged edges
<rdar://problem/12307742> CSS3 Filter Effects rendered inconsistently across Safari CPU path, GPU path, iOS, and Chrome
<rdar://problem/12363449> webkitRequestAnimationFrame does not work between pages on Mobile Safari
<rdar://problem/12628214>/Chromium 159253 Changing background-color and left at the same time does not work
<rdar://problem/12722122> elements with 3d transforms non-retina if they are in two divs with perspective
<rdar://problem/13043725> Child with rotateY is not clipped by parent with overflow:hidden and border-radius
Chromium 161423 Blur CSS3 Filter Effect does not blur outside the bounds of the div
Chromium 164703 Rendering artifacts on page while rotating element on z axis

Update

Mozilla has found the performance issues with Firefox 19 are the result of a regression, and are tracking with https://bugzilla.mozilla.org/show_bug.cgi?id=849263.

The post Myth busting the HTML5 performance of transform:translate vs. top/left appeared first on Tumult Company Blog.

Setting a filter effect like ‘blur’ or ‘saturation’ on an image using CSS can create an interesting tech demo, but what’s the point? Why go to the trouble to manipulate an image in the browser when it can be easily edited in an image editor?

When we added CSS filter effects to Tumult Hype, we knew it would open up a world of possibilities for animators. An un-animated CSS Filter effect is one thing, but when animated, the CSS Filters bring a new richness to web content. Blurring, saturating, and hue shifting images, text, or elements (and even videos!) brings a new dimension to animations. Think lighting effects, indicating motion with blurring, and setting the color temperature for images. Technically, Tumult Hype is setting CSS properties on your elements:

#YourElement {
  -webkit-filter:saturate(5) hue-rotate(500deg) sepia(0.7) contrast(1.5) brightness(.9);
}

… but doing so up to 60 times a second at a rate you define. Even though it’s a cutting-edge feature that currently works in Webkit based browsers, it’s ready for prime time: Reuters has added subtle blurs to their recent infographic on the Boeing’s 787 Dreamliner.  In the document below, we show what filter effects do when applied to photos, how they can augment infographics, and a few other fun examples.We hope these inspire you to play around with all the CSS filter effects! Click the image below to open it up: 

If you’d like to examine some of the code or techniques used in this document, grab the original .hype file here.

Environmental Effects

Want more? Here’s a mesmerizing mandala produced in Tumult Hype by one of our more creative users who goes by the name Big Poppa E (alternate mandala link here). His entire site is worth a look; it’s a mystical tour into his work and life through a Myst-like system of rooms chock full of sound and lighting effects. Check it out!

The possibilities are endless. Go have fun!

The post CSS Filter Effects in Practice appeared first on Tumult Company Blog.

The 1.6.1 update includes some important bug fixes and is recommended for everyone to upgrade.

The most important note about this release is that we’ve changed the “.resources” export folder names to “.hyperesources” to prevent problems displaying on older Microsoft IIS web servers (such as those used by GoDaddy). The inclusion of the “.” in Tumult Hype is necessary to support sandboxing, which is required by Apple as a part of their Mac App Store review process. The move to .hyperesources was motivated by very old but widely used versions of Microsoft’s Internet Information Services servers which are unable to serve content from folders with a .resources extension. Unfortunately, the incompatibility was not caught during 1.6 development, so we needed to change the extension once again. We apologize for the inconvenience and expect no further changes to the export filenames.

Read the full release notes for Tumult Hype 1.6.1.

The post Tumult Hype 1.6.1 Update Released appeared first on Tumult Company Blog.

Today is the last day of our 15% off sale. If you were waiting to grab Tumult Hype, today is the day:  Grab it on the Mac App store!

We’re also pleased to announce that Tumult Hype licenses may be bought with Bitcoins (learn about Bitcoins here). At this time one license amounts to about 3 Bitcoins. See the Tumult Hype purchasing page to get started.

New to Tumult Hype? Start here.

The post Final Day for Tumult Hype Sale (Sale is now over) appeared first on Tumult Company Blog.

Tumult Hype is the award-winning HTML5 animation builder for OS X.  It has been used for all kinds of different projects, like infographics, porfolios, NASA roadmaps, mobile ads, greeting cards, museum kiosks, children’s books and much, much more.

Our new update, Tumult Hype 1.6, contains 35 new features and has several bug fixes and performance improvements. We are beyond excited to get it in your hands. We’re incredibly proud of this release and think you will love it — Tumult Hype 1.6 is face-meltingly powerful!

Some of the 35+ new features include:

• CSS Filter Effects to blur, change brightness/contrast, and hue shift
• Resource Library for managing images, videos, functions, and document assets
• Capo tool: easily set animation start times when recording
• New actions to pause, continue, and jump to specific times
• Timeline Actions which can be triggered at any point on the timeline
• Action chaining to make sophisticated flows
• New JavaScript APIs (shown in our new documentation viewer)
• The document’s <head> can now be modified
• Layout guides
• Scene editing improvements for rotating and resizing elements
• IE 10 and other current browser compatibility updates
• Sandboxed
• Retina artwork and icons for the app

The post Announcing Tumult Hype 1.6 with Filter Effects appeared first on Tumult Company Blog.

NASA’s amazing contributions to our knowledge of rockets and space travel are just a small part of what they do. Decades of research have pushed materials science, health, information technology, and many unexpected fields to new frontiers. NASA’s Office of the Chief Technologist commissioned an interactive poster to present the 14(!) technology areas central to their technology roadmap:

I asked Dennis Bonilla & Tate Srey (who produced this document in Tumult Hype) how they approached this project, and what it was like to distill so many technology projects into one unified interface:

When we were looking through the technology area data, we had to think of each Technology as though it were a ride or an attraction. Some technologies lend themselves very easily to that idea—like Robotics or Launch Systems. Some are a lot more conceptual like “Thermal Management Systems” or “Energy Storage.” For all of them, we went through a lot of sketches and idea development. But we knew we had a lot of flexibility in how we represented the technology. It didn’t need to be literal. So some of our initial ideas were very science fiction. But we had to balance that freedom with keeping it grounded with actual NASA technology—though some of it actually borders on sci-fi. There are certain iconic images like the EDL (Entry, Descent, and Landing system) where the capsule enters the atmosphere–that’s similar to the system that was used for Curiosity to Enter the Martian atmosphere.

Since Tate and Dennis began with a poster, and later added interactivity to the project, their challenge became what they call ‘plussing’ the static poster:

We were looking for ways of “plussing” the infographic. Plussing is a term we’ve adapted from Walt Disney to mean “making an idea better and adding more value to it”. The spinning globe was part of that effort. Throughout our development process we talk a lot about how to “plus” a piece. When we’re blue-skying ideas—no budget or schedule or constraint, some of the things we come up with can be pretty crazy. After we’ve met all the requirements, we have to evaluate which of those are actually doable and will also be the most impactful. We have to walk the fine line of making sure that plussing an idea doesn’t become feature creep. But most importantly we want to engage the audience without distracting them.

What are you waiting for? — discover The Future Brought to You by NASA and don’t miss their past work: NASA’s Exploration Roadmap. This roadmap, as you may have guessed, explores where and how NASA plans to explore the great beyond in the near future. (Also see the ‘making of’ post.)

The post The Future Brought to You by NASA | Technology Infographic appeared first on Tumult Company Blog.

Inge Trondsen of Studio Design (Norway) just launched a site for the film Liv and Ingmar which he built with Tumult Hype. The film explores the tumultuous love between Liv and Ingmar Bergman (one of my favorite film directors). I asked Inge what he likes about using Tumult Hype:

As a designer, I love Tumult Hype because this wonderful software enables me to focus on design, not code. I can do pretty advanced stuff, and it works – even in my aunt Olga’s browser. And, most importantly, when I work Tumult Hype gives me a feeling of open space – not limitations.

Even Olga. If you’re in New York, Liv and Ingmar will be playing at the New York Film Festival today.

The post “Liv and Ingmar” – documentary film site appeared first on Tumult Company Blog.

• Minor fixes for Mac OS X 10.8 Mountain Lion and Retina displays
• Workaround for Chrome/Safari 6 issue where scenes flicker images when using Dropbox
• Fixed issues where z-ordering may be incorrect inside of groups
• Dropbox authentication is now web-based
• Many other bug fixes…

If you purchased from…

… The Mac App Store

• Open the App Store by going to the Apple menu and selecting App Store
• Make sure you are signed in via the Store menu
• Click the Updates tab at the top of the App Store window
• If you have not already upgraded, it should be listed in the Updates section, and clicking the Update button will install the latest update for free.

… The Tumult Store

• Open Tumult Hype
• Choose the ‘Hype > Check for Updates…’ menu
• Install and relaunch when prompted.

The post Tumult Hype Bug Fix Update: 1.5.2 appeared first on Tumult Company Blog.