Believe the Hype: HTML5, CSS3 and Javascript animations with no coding!

  • Posted by Chris Brewer
  • May 23, 2011 1:03 PM PDT
  • 0 comments
  • 4,615 views

Apple has made quite a bit of noise around HTML5, CSS3 and Javascript. Indeed, Apple's view of the web using these three technologies threatens to unseat Adobe Flash as the go-to technology for providing simple web-based animation and other interactive niceties. However, a lack of tools for authoring in this Apple-sanctioned scenario leaves many questioning whether the revolution described by Jobs et al is anything more than hype.

That seems to be the question former Apple alums Jonathan Deutsch and Ryan Nielsen are striving to answer with the release of "Hype", a Mac application for creating interactive HTML5 content for modern browsers (including iOS devices).

I'm excited at the prospect of finally having an app to support my HTML5 animation aspirations, so the approach I'm taking in this review is to briefly call out the main features of the app, and then dive headlong into a timed test of creating my first HTML5 animation — a recreation of a simple yet elegant animation I recently saw on Apple's web site.

Setting the Stage: 

Hype is based around the concept of scenes. A "scene" can be most easily understood by comparing it to a single slide in Keynote. The scene consist of a stage, plus text, graphics and buttons, and a timeline. Putting elements on the stage will cause them to be displayed; taking them has the opposite effect.

Time for Animation: 

Each scene is comprised of at least one timeline. Timelines contain a series of steps that change elements in the scene — AKA animations. You can add multiple timelines to a single scene, triggered by events such as a mouse over or click. Each item (text, video, graphic, etc.) is represented on the timeline.
 
Keyframes mark specific points in time on the timeline. You can easily add keyframes to an item, both manually and automagically. This allows both fine-grained timing control, and time-saving automation. Hype is advanced enough to allow you to place an element in one position on the stage, set properties such as transparency and size, then advance the scrubber to a point later in the timeline, press the record button and change those elements. The tweening (the various changes across time such as position) are automatically calculated. It couldn't be easier.

Fine Control:

Hype provides robuts fine-grained control, once you dig in. The interface is pleasingly simple (and therefore accessible) at first start. But, the finer controls you crave once you've dug in a big are there as well. 
 
For example, animations are set to ease in/out by default. You can alter this (ease in, ease out, linear) for each animation. A wide array of attributes for each element can be modified, such as padding, blur, letter spacing, shadows, colors, and more.

Scene Transitions:

Hype provides you the ability to transition between scenese (similar to transitions between slides in Keynote or PowerPoint). The selection here, however, is very basic, and only Webkit browsers (Safari, Chrome, and most mobile browsers) support anything other than Instant:
  • Instant - The scene changes immediately
  • Crossfade - The scene dissolves into the next scene
  • Swap - The scenes exchange places using a 3D effect
  • Push - The scenes move simultaneously so one is shown and the other is hidden.

I'd like to see more transitions added, with better support across browsers.

About the Developers

Tumult Inc. was founded on December 20, 2010 and is funded by Y Combinator as part of the Winter 2011 class. We work from an undisclosed location in the San Francisco Bay Area. We're making the next generation of tools to produce beautiful web content.

About the Founders

Jonathan Deutsch

Jonathan previously was an engineering manager at Apple responsible for teams working on Mail.app, Mac OS X updates and automation tools. He's a multi-talented Objective-C hacker, web developer and designer. Jonathan graduated in 2004 with a BS in Computer Science from Purdue, where he also ran a small Mac shareware company.

Ryan Nielsen

Ryan was a senior member of the Mac OS X Project Management team at Apple. As a part of that team, he guided the development of five major Mac OS X releases, shaping everything from the schedule down to the design and implementation of individual features. Ryan graduated with a BS in Computer Science and a Minor in Applied Mathematics from the University of Colorado in 2004.

Video: 

Like many web developers, video has moved up my list of "Things I Would Change If I Ran The Internets". Though nowhere close to the pain inflicted by Microsoft's standards-breaking browsers, video has become a soup of conflicting standards that threatens the sanity of cubicle coders everywhere. Sadly, Safari, Firefox, Chrome and Internet Explorer don't all support the same flavor of video. Safari and IE support H.264 (mp4), while Firefox supports Theora (ogv), and Chrome supports VP8 (webm) as well as Theora (ogv).
 
Hype tries admirably to assist with the current fractured state of video in today's market-leading browsers. The HTML 5 video tag, which Hype relies upon, supports multiple flavors of the same video, providing the version that your particular browser supports. In Hype, you can easily add one or more sources of video to your presentation. The pain point: You have to render multiple versions of your video if you want it to be viewed across all browsers.

Browser Compatibility: 

Helpfully, Hype notifies you during editing and publishing of any properties your project relies upon that are unsupported in various browsers. For example, when publishing my project, I was warned that Internet Explorer 6 doesn't support transparent PNG images. Also, I noticed when adding text shadows Hype notified me that Microsoft's flagship browser Internet Explorer 9 doesn't support text shadows. [Aside: come on, Microsoft!]

Exporting:

Your final project can be exported easily as an HTML5 document. Further, in can be embedded into an existing HTML page by copying and pasting three lines of code. Easy cheesy.
 

The Project: Recreating an Apple Animation

Recently, I was shopping for a new iMac. Yes, 27" of bright and shiny aluminum love, in support of my life as a web developer. So, when I visit a web page, I'm often pulled off task by an intrinsic need to understand the underlying technology they use.
 
Knowing that Apple recently transitioned their entire site to HTML 5, I kept my eyes out for some interesting use of the technology. Lo and behold, on the iMac pages of their site, I saw a new method for displaying their hero (a hero is the large product display at the top of the page — the centralized focal point for your eyeballs).
 
The hero on http://www.apple.com/imac/ slides in from right to left, with each element (text and one or more graphics) sliding in at different speeds and timing, à la TFRF (Techniques Formerly Relegated to Flash).
 
I likey.
 
'So,' I thought, 'I must attempt to replicate this using Hype.'
 
Start Time: 8:22 AM
 
Step 1: Grab the assets. This is easy. I right-clicked on each element on the first slide of Apple's iMac hero. I placed each of the four images into a folder.
 
Step 2: Measure the stage. Using Apple's screen capture utility (shift-command-4), I  measured the size of the stage on Apple's hero: 982 pixels x 642 pixels.
 
Step 3: Create a new Hype document of the same size: 982 pixels x 642 pixels.
 
Step 4: Arrange images on stage, then move them off stage.
 
Step 5: Turn on recording, and move the images to their respective locations, starting with the big iMac image, then the little iMac image, then the text images.
 
Step 6: Export.
 
End Time: 8:33 AM
 
Total time to complete a close approximation of Apple's nifty HTML5/CSS3 iMac hero animation: 11 minutes. And that's with no prior experience; more a testament to Tumult's saving interface design skills than to my nerdy complexion.
 
 
 

Conclusion: 

Hype is an easy-to-use HTML5/CSS3 animation tool with a well-conceived interface that makes creating banners and other rich web sites a snap.
 
Hype 1 for Mac can be purchased for an introductory price of $29.99 in the Mac App Store.
0 comments