This is documentation for Tumult Hype 2.5.3, released in October of 2014.

View Latest Documentation

Tumult Hype Documentation — Flexible Layout

Tumult Hype offers a powerful layout system for resizing and scaling documents, allowing Hype animations to respond as the browser’s window or device’s viewport changes size.

Document Scaling

By default, Tumult Hype animations have a fixed width and height, and do not respond to window or viewport size changes. To make your animation responsive to size changes, you must first select the Width and Height Scale checkboxes in Hype’s Document inspector. Enabling these options allows your document to respond to width or height size changes as desired.

The Width and Height Scale options are complimented by percentage fields which define how much of the containing window or div the Hype document should fill. The default value is 100%, which means the Hype document will expand or contract to fill the width or height of its container. Reducing this number restricts how the document will expand. For example, setting the value to 50% means the Hype document will only expand to fill half of the width or height of its container.


Document Scale Settings

Element Pinning and Sizing

Enabling document scaling is only the first step for creating a completely responsive document. After deciding how your document should scale, you then need to define how elements in the document should adapt to size changes.

This is done by “pinning” elements to edges of the scene, allowing the elements to resize horizontally or vertically, and, for proportionally sized elements like images, controlling how they should scale. Hype’s Element inspector offers a Flexible Layout section which contains all of the controls for managing how elements should adapt to document size changes.


Document Scale Settings

Pinning

Pinning an element to an edge instructs that element to move as the edge itself moves. When pinned to non-opposing edges, such as the bottom and right edge, the distance from the element to those edges remains fixed. In other words, an element that is placed 100 pixels away from the right edge and is also pinned to the right edge will change its location as the document resizes so it’s always 100 pixels away from the right edge.

When an element is pinned to opposing edges, the element’s location changes so the proportion of the distance from the element’s center to the opposing edges is always preserved. The best example for this case is element centering: an element that is centered between the right and left edges and is also pinned to those edges will always be centered regardless of how the document’s size changes.

A more complex example is an element in a 1000px wide document whose center is 200px from the left edge and 800px from the right edge. When this element is pinned to both edges and the document has width scaling enabled, the element’s center will always be positioned so that 20% of the document’s width is between itself and the document’s left edge while 80% of the distance is between itself and the right edge.

Sizing

Element resizing is controlled by the two sizing arrows presented in the Element inspector’s Flexible Layouts section. By default, both sizing arrows are disabled which means that neither the element’s width nor height will change as the document’s size changes. Enabling either one or both of the arrows allows the element to change its size either horizontally or vertically. Like pinning, an element’s size changes proportionally to the document’s size. Thus, an element whose height is 20% of the document’s height will resize to ensure its height is always 20% of the document’s height.

Scaling Behavior


Scaling behavior settings appear when
height and width sizing is selected.

The scaling behavior control allows you to change how elements should be resized. This control is only enabled when an element is allowed to resize both its width and height. When an element is allowed to resize in both dimensions, the default scaling behavior is to stretch the element. This is ideal in most situations, but there are times —¬†such as when an image is being resized —¬†where an element should not be arbitrarily stretched and instead its proportions should be preserved.

To handle those situations, Hype offers two additional scaling behaviors which preserve the element’s aspect ratio: Shrink to Fit and Expand to Fill. When Shrink to Fit is chosen, Hype ensures that the element will never expand outside of its bounding region. Conversely, when Expand to Fill is chosen, Hype will make sure the element always fills its bounding region, even if that means it may spill outside.

As an analogy, consider what happens when watching wide-screen content on a TV: viewing that content letterboxed is similar to Shrink to Fit as all of the content is always visible on the TV. Likewise, viewing the same content fullscreen is similar to Expand to Fill, as the video expands to fill the TV even though some content falls off the screen.


Scaling Behavior Illustrated

Animations

Both standard animations and motion paths take into account the element’s sizing and pinning settings, and adapt to the element’s position and size changes as needed.

Viewport Settings

Documents with a scaling turned on for the height dimension will not display vertical scrollbars. Likewise, documents with a scale percentage set on their width dimension will not display horizontal scrollbars. If small screen sizes conceal parts of your document outside of the viewport, uncheck the 'height' scale checkbox. To specifically address issues with hidden content on mobile devices, set the viewport width property of your document to 'device height'. For more information on the viewport property, read the Touch & Mobile chapter.

Examples