Is there a way to make scene size change accordingly to user interaction?


#1

I am currently in the midst of a project and I have stumbled upon a roadblock.

Im hoping to achieve the effect where once a user clicks on an element/button, there would be a drop down effect and the scene size must lengthen. It looks akin to https://www.googlesciencefair.com/en/competition/previous-years , where once you click on the winners box, the height of the screen increases.

Currently, adjusting the height on hype only changes the scene length and does not allow for the responsive effect I am going for.

Is there any way I can achieve this?
Thank you!


(Mark Hunte) #2

You can do this by using some Javascript.

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.

//-- expand the scene container, we cannot use the hype API to set it, so we use normal javascript to do so.
	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.


There are two Javascript functions. The first runs on scene load and get the scene element and it’s original height.

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)


#4

Hi Mark, appreciate your help. Unfortunately, I was experimenting with it and can’t seem to make it work. Also, I have zero knowledge of coding btw. :frowning:

Thank you!
webpage trial.zip (404.6 KB)


(Mark Hunte) #5

Sorry my fault,

I had a type in the expandBox’x class name .

I wrote it as exapndBox instead of exapandBox

Here is your corrected version
webpage trial.hype.zip (458.9 KB)


#6

Wow! Thanks for your help!! It is greatly appreciated! By the way, is it possible to induce this effect for multiple elements? I am assuming I would have to add on to the js provided?


(Mark Hunte) #7

You should be able to give each group a sequenced name like the on we are using now, as well as the button.

The expandBox uses class but must be in a given group.

I tried to make the code with this in mind, so if you can do the groups similar to what you already have.

for example

Winner_2_Group

Hope that makes sense

The main issue maybe toggling the effect correctly.


(Mark Hunte) #8

Here is a second example.

I had to give the groups a class name also.

imagine you click button 1.

The expanding happens as normal.

Now you click button 2. That also expands as normal but button 1’s expandBox is still showing…
The more expandBoxes you have the more complected this would get.

So the idea is, when you click a button all other expandBoxes revert, we also need to de-class their ‘active’ class name.

But we must not de-class the current buttons class at the same time.

We do this by gathering the button elements and the group elements in an array each and iterate over them to reverse all of their expandBoxes and de-class them.

We also add a check to make sure we are not de-classing the button that was clicked. We do this because we want to be able to click a button twice and still get it’s toggle effect.

I have added new code in a new function to do all of this.

The new function is called first when a button is clicked. then the expansion function is called after to do the expandBox stuff.

webpage trial.hypetemplate.zip (460.0 KB)


#9

Thank you for your invaluable help! :smile: Is there a way to make the box slide down rather than appearing suddenly though?


(Mark Hunte) #10

It is,

You would need to adjust this way for what you want but in this example,

1, on the main scene I set the height of both expand boxes to 0.

The on both winner_1_group & both winner_2_group timelines,

2, add the a height property key frame to change the height from 0 to 517.
3, mover the display property key frame to end just before the 1 second mark… and…
4,… mover the top & height key frame to the 1 second mark, which give the container time to expand before we change the height of the expand boxes.

This should give you an idea how to do what you want.

webpage trialv2.hypetemplate.zip (460.3 KB)


#11

Hmm the page can’t seem to expand anymore… Also, is there a way to make the page scroll down at the same time when the page increases in height so the viewer gets to see the contents in the expand box directly rather than having to manually scroll by themselves? We are close to fulfilling our vision for the webpage, thanks so much!


(Mark Hunte) #12

Oh,

I probably munch something along the way but the principle I describe still stands.

As for the scrolling, search the site, there are plenty of examples about scrollTo