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.

• 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.

One of Tumult Hype‘s top strengths is the ability to output content which can be displayed on a wide range of browsers across desktops, phones, and tablets. We put a lot of energy into making sure animations look great and run smoothly on Internet Explorer 6 to the latest Chrome 18. Apologies if we made you shudder at the mention of IE6! We know creating a single site that works among so many browsers can be a difficult experience; crafting a tool which lets users create those sites also has many unique challenges and tough tradeoffs.

Tricking IE6-8 into Being an HTML5 Browser

Every browser has its own set of differences and quirks. For the most part, variety in CSS property names, dimensions, or known bugs are easily worked around. Many property applier functions in the HYPE.js runtime simply look like this:

var boxShadowValue = “” + xOffset + “px “ + yOffset + “px “ + boxShadowBlurRadius + ” “ + boxShadowShadowColor;

// webkit

element.style["-webkit-box-shadow"] = boxShadowValue;

// mozilla

element.style["MozBoxShadow"] = boxShadowValue;

// firefox 4.0+

element.style["boxShadow"] = boxShadowValue;

// ie/standard

element.style["box-shadow"] = boxShadowValue;

It isn’t always this easy. Supporting older versions of Internet Explorer (6-8) has its own set of challenges and many saving graces. Internet Explorer has a filter system that allows for a surprising number of effects, many of which have since become standard on modern browsers. For example, while the CSS3 “tranform:rotate(45deg)” syntax is not supported, IE’s filter system can allow the same through this CSS property:

element.style["-ms-filter"] = “progid:DXImageTransform.Microsoft.Matrix(SizingMethod=’auto expand’, M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)”;

It might look ugly and requires additional repositioning of the element to match CSS3-supporting browsers, but it does work. For other CSS3 effects, such as background gradients, border radius, and box shadows (as seen above), Tumult Hype takes advantage of a project called CSS3PIE. If you’ve seen the “PIE.htc” file in its exported resources folder, that’s what it is for.

Video in older versions of Internet Explorer presents a more interesting problem. The HTML5 <video> tag is not supported, and there are no simple workarounds like CSS3PIE. We decided to fallback to the QuickTime plugin for displaying video. It is widely installed (thanks to iTunes) and can playback .mp4/.m4v videos which are typically used for the <video> tag on Safari/IE9+. Plugin loading can be delayed, so we had to use poll-based timing tricks to make sure attributes like autoplay, loop, and mute were being set properly.

The biggest downfall of Internet Explorer 6-8 is lack of support for transparent PNGs. There’s adequate workarounds in IE 7 and 8, but unfortunately IE6 is out of luck (hacks exist, but do not work well enough). Our recommendation is to use transparent gifs when this becomes a problem.

We’re mostly happy with standards support in IE9 and what we’ve seen of IE10.

Here’s a video we put together showing the Buckley’s Duckleys Ad across a variety of browsers:

Avoidance of CSS3 for Animation

More interesting may be the decisions we made when approaching how to animate content across browsers. Animations historically were made using a quickly repeating timer in JavaScript (a “heartbeat”) and then programmatically changing the desired properties. Newer CSS3 features such as Transitions and Animations were developed to make this process easier for site creators and more efficient by processing inside the browser. With the goal of optimizing animation performance, Tumult Hype 1.0.x had a hybrid model of using CSS3 transitions and falling back to JavaScript hearbeat-based animations for older browsers or on unsupported transition properties. We did not use CSS3 Animations because Safari (Mac/iOS) and Chrome were the only two browsers supporting it during initial development. To make sure the timing functions (ease-in, ease-out, etc.) were identical, we even transcribed WebKit’s UnitBezier.h into JavaScript using identical control points.

Ultimately, we found the approach of using CSS3 Transitions had several drawbacks:

• Timing Issues – There are no specific guarantees for when a CSS3 Transition will actually kick off, which is important given our dynamic animation system. It is therefore not possible to synchronize different elements together. This also applies for the same element; when we introduced the heartbeat-based bounce timing function in Tumult Hype 1.5, we found there were jumps in the animation playback between the CSS3 Transition and our bounce animation since the transition had not started at the time we expected.
• Lack of Control – CSS3 transitions and animations give no affordance for fine-grained pausing or frame steps. While Tumult Hype does not support these now, we’d like to give greater flexibility in the future.
• Syntax – The code for an CSS3 transition is most typically made with a single string property on the element. While not impossible to work with, it is unwieldy and we would prefer being able to have control from JavaScript directly. It is unfortunate for tool creators such as ourselves that the direction of many new CSS properties is to use string lists instead.

We abandoned using CSS3 Transitions in Tumult Hype 1.5 for the reasons listed above. It’s also a new technology, and not without a few bugs we hit. From a performance standpoint, the impact was minimal and we also adopted the requestAnimationFrame API so several of the browser optimizations could still be applied. We also found it simplified our code, testing, and will allow for more features in the future since full control is in our hands.

Other Considerations

With the reignited rapid pace of browser development, we’ve also run into many bugs/regressions that have appeared in updates. Some of these include not being able to see fullscreen videos in Safari, random blue page backgrounds in Chrome, and not being able to rotate and move elements at the same time in iOS and Mac Safari. WebKit regressions can be especially nasty since they may also affect the Tumult Hype application. Sometimes we can workaround them with alternate methods of doing the same manipulation — in the rotation bug’s case we used -webkit-transforms’s translateX/Y instead of setting the CSS style.left/top properties. Other times we must simply wait it out until the browser vendor has a fix.

One of our goals for Tumult Hype is to always adopt the bleeding edge of new HTML and CSS features. Because of this, we realize no matter how much effort we put into supporting older browsers, some capabilities (like 3D transformations on IE6) will simply be infeasible. For these features, we developed a warning system in the Hype application itself. In the Document Inspector (command-1) you can select which browsers you would like to support, and thus see warnings for when using an unsupported feature. These appear both in the inspector and in a summary list at export time. While it is no substitute for testing across different browsers, the system does act as an early way to detect possible compatibility issues.

Tumult Hype arose out of the need for a creative tool to create animations on the web without dredging through code, browser inconsistencies, and learning a complex program. We work hard to keep web animation simple so users don’t have to!

The post Notes on Tumult Hype’s Cross-Browser Compatibility (or: How I Learned to Stop Worrying and Almost Not Hate IE6) appeared first on Tumult Company Blog.

It’s our pleasure to announce the release of Tumult Hype version 1.5.1. This update features:

• Option-clicking the per-property add keyframe button will add keyframes to all properties on selected elements
• Copy/Paste scenes
• Bug fixes

It is recommended that everybody upgrade. Please visit our detailed history page for more information.

The post Tumult Hype 1.5.1 Released! appeared first on Tumult Company Blog.

The post Special Announcement: Tumult Acquires Adobe appeared first on Tumult Company Blog.

We’re pleased to announce the release of Tumult Hype 1.5! With Adobe recently dropping support for Mobile Flash, Tumult Hype has become a critical tool to making animated content for smartphones and tablets. This version is a major update containing over 30 new features, including:

• Export as iBooks Author widget
• Redesigned animation interface separating element and property keyframe editing
• Element grouping
• Scene zooming
• Element locking and visibility toggles
• Improved Lion support: versions, autosave, and scrolling
• Rulers and guidelines
• “Paste with Animations” for element copying
• Bounce and instant animation timing functions
• Insert “HTML Widget” for arbitrary code/script execution
• Significantly smaller exported Javascript files (about 1/3 the size)
• New app icon (animator’s lightbox)

We’ve been working hard at this update and there should be something for everyone! Version 1.5 knocks out our top requested features, further elevating it as a mature professional design tool. For more details, please checkout our What’s New In Tumult Hype 1.5 page. We also produced a video showing off 25 Features in 10 Minutes:

Tumult Hype 1.5 is available on the Mac App Store or the Tumult Store for $49.99 USD to new users or as a free upgrade to existing customers.

If you purchased from the Mac App Store, you can update by these steps:

1. Open the App Store by going to the Apple menu and selecting App Store
2. Make sure you are signed in via the Store menu
3. Click the Updates tab at the top of the App Store window
4. 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.

If you purchased from our Tumult Store, you can update by these steps:

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

We look forward to seeing what you create with Tumult Hype 1.5!

The post It’s a big day: Tumult Hype 1.5 is here! appeared first on Tumult Company Blog.