Cheat SheetHype 3 Pro & TweenMax How to use GSAP's TweenMax for scripting animation inside Tumult's Hype 3 Pro

Like finding your peanut butter in my chocolate, the newly announced Hype 3 Professional from Tumult may be the missing ingredient I've been searching for to complete a professional HTML5 animation workflow. I'm experimenting with incorporating the GreenSock Animation Platform as the "animation" engine that powers my Hype created layouts.

Download the demo project files.

HYPE 3: An IDE for GSAP?

• Hype's weakness is a slow and fiddly process of keyframe animation

• GSAP, being a javascript animation library, lacks any HTML5 document design process.

Here is a quick walkthrough of my method for combining them and using the best of both to create a single, powerhouse, HTML5 interactive animation tool. This example focuses on adding jQuery and GSAP's TweenMax libraries as resources for Hype.

Adding TweenMax to Hype

Drag and drop your local copy of TweenMax-min.js into Hype'sResources panel

Hype auto-magically links it into the head of your document. This is the standard way of adding any external .js file to a Hype 3 project and makes it effortless to add additional librarys, like jQuery, when needed.

Set ID's and Classes in Hype

GSAP's TweenMax finds DOM elements by any CSS selector. This means that in addition to ID's you can also use CLASSes to animate groups of items. In this example I added a class="ball" to each of the three dots in Hype's Identity panel and get them all to appear in sequence using the following GSAP TweenMax method.
TweenMax.staggerFrom(".ball", 1, { scale:0, ease:Bounce.easeOut }, .5)

Hype auto-magically links it into the head of your document. This is the standard way of adding any external .js file to a Hype 3 project and makes it effortless to add additional librarys, like jQuery, when needed.

Code the TweenMax animation routine

Hype documents make heavy use of their own javascript routines so using Hype's own menus, buttons, and code editor is important to keep the resulting codebase neat and tidy. Here is a step-by-step recipe for getting hype to "stub out" a custom js function ready for you to fill with custom TweenMax animation code.

Creating a Custom Function

1. Click the small + button at the bottom of the Resources panel
2. Select Add Javascript Function
3. This will launch Hype's code editor with an UntitledFunction() ready for your code

Adding Buttons to Trigger Animations

Hype makes it foolproof to add interactivity and I'm finding it easier than coding my own from scratch. In this demo I used Hype's Actions Panel to add + a click/tap behavior to the button by selecting a Run Javascript... action and choosing myTweenAnim() as the function to run when it is clicked.

Download the demo project files.