I have put together an example of the top of my head that is similar to the example you have given. Off the top of my head means it is raw and would need work for you own means.
But it shows you the key components in expanding the scene.
theMainSceneContainer.style.height = (window.sceneHeight + exapndBoxHeight ) + "px";
//-- expand the scene using the setter API
hypeDocument.setElementProperty(window.scene, 'height', window.sceneHeight + exapndBoxHeight , 1.0, 'easeinout')
When you want to expand the scene you actually have to also expand it’s container div.
The scene is an element just like anything else so once you have it’s id you can expand it with JS. Using the Hype setter API.
The Container is also an element but you need to use standard JS API to expand it’s height. The Hype JS setter API does not work with it. ( probably something I am missing )
The JS is may not be for beginners but saying that it should not be to hard to understand the code that changes the sizes.
I use classnames and ids a lot here to use in targeting the right elements. Although I only have one button and one expand box along with it’s timeline , the way I have done it in this example allows for more than one of each.
The second is run when the button is clicked. It uses a combination of the button id and strings to target the correct expand box in it’s group and the correct timeline.
The code and timeline are one so that the button acts as expand/revert scene when clicked.
Again this just shows you the same code to expand but how simply to reverse it.
SceneExpand.hypetemplate.zip (30.7 KB)
Note I have a typo were I named the expand Box expndBox instead of expandBox
I have updated the version. ( which is annoying because you lose the current download count. (3) in this case so not that big a loss)