Hype Animation Fluid Height

Hype is a great HTML 5 authoring tool, but a major set-back with exported animations is that the container does not retrieve a fluid set height. Typically the container reverts to height:0. A simple way to fix this is with CSS:-

#hype_container {
/* Adjust to your needs */
min-height: 500px;

However if you are using a responsive layout (which is one of Hype’s best features) this won’t work unless you use media queries which could be tedious. So I have written the following jQuery to do this automatically:-

jQuery(window).on("load resize scroll",function(e){
function updateHypeSize() {
  if(jQuery('.your-child-class').is(':visible')) {
    var sumheight=0;
    jQuery(".your-child-class").each(function () {
        var child = jQuery(this);
    jQuery("#hype_container").height(sumheight + 35);

You will need to give your main children a class within your Hype scene. The jQuery will then cycle through the Hype Container and make it the height of the children. This will work in portrait or landscape / responsive layouts.

This method will also work in any case where you want the parent to be set to the height of the children.

About the Author
Hype Animation Fluid Height 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g


A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.