Peter Laundy

22 Oct 2014, 2:17 am

[Pro] FYI: A method to get Hype animations to load in flexible height

I have been experimenting with Hype for a splash page animation prototype. I discovered that using the normal Hype-to-Freeway import instructions, my flexibly sized Hype animation would load onto my Freeway 7 page only if the vertical dimension of its containing box were fixed. This fixed height made in-line construction content below the Hype animation move further and further out of sight beneath the Hype image as the viewport got narrower and the shrinking image took up less and less of the height of the containing box.

On the Hype Forum I received instructions that worked from a Tumult representative, as follows:

“Here is the basic technique to do this:

What this HTML page does, is resizes an iframe containing a responsive document based on the width and height (Line 31) of the original document. The JavaScript at the bottom adjusts the size of the iframe containing the Hype document (hypeFrame) — this ensures that you don’t have any awkward white space below it.”

On the github page I appended some clarifications that would have helped me be more speedy in successfully implementing the instructions.

Note that this fix is designed for Hype animations that are completely flexible on both x and y axes and have a constrained proportion, because the narrowing and widening box maintains a consistent proportion even if the animation contained within it doesn’t (as mine didn’t because it was composed of a title bar that stretched horizontally but was fixed vertically, above photos that stretched both horizontally and vertically).

Peter Laundy

Evanston, Illinois, USA


8 Apr 2021, 2:04 pm

I know this thread is really old ,however I am trying to do just this. Could anyone tell me how to add this code in? I am not a coder so idiot proof instructions please. I’m using FW 7.4.1 Many thanks.