Animation toggling scene/stage height - (in a Wordpress post for example)

[Seven]

Hello, everybody,
I animated a button and added it to my test contribution in Wordpress. Everything works, too. Unfortunately there is a huge space reserved under the button for the “box”, which appears after clicking on the button.

But I would like the text below (outside the animation) to come directly under the button. And the text only moves down when one clicks on the button.(see photo) Is that even possible? Thanks in advance.

[MaxZieb (Loves Hype)]

Have a look here

Extend Tumult Hype with JavaScript: hypeDocument.extensions

↑ extension index hypeDocument.setCurrentSceneHeight Sets the current scene height. Beware to do this it need to set the hypeDocument height as well so you should reset scene height on scene changes if you wish to the restore initial state. /** * hypeDocument.setCurrentSceneHeight v1.0 * @param {Number} height to set the scene element to * @require currentSceneElement */ hypeDocument.setCurrentSceneHeight = function ( height) { var cS = hypeDocument.currentSceneElement(); cS.pare…

[Seven]

thanks for the link. but it doesn’t work on my project. i work with an animated timeline. this timeline is executed when i press the button. i took the example but unfortunately it doesn’t work. i also have no experience with css etc… so it may be because of my ignorance. thanks again!

[Daniel]

The example Max shared does exactly what you’re trying to do, the only change you would need to make is that you need to assign the triggering of that Javascript function “togglefooter” to run as a Timeline action (instead of as a mouse click action) on your timeline. If you can share your document I’ll help you get this installed.

Here’s more info on Timeline Actions.

[Seven]

thank you for your offer! here my project information box 1.zip (23,7 KB)

[MaxZieb (Loves Hype)]

Here you go:
information_box_max.hype.zip (27,2 KB)

PS: Maybe edit the post topic to “Animation toggling scene/stage height” so other people can find the solution in the future as the request isn’t WordPress specific.

[DBear]

PS: Maybe edit the post topic to “Animation toggling scene/stage height” so other people can find the solution in the future as the request isn’t WordPress specific.

Done

[Daniel]

Based on @MaxZieb’s scene height function, I just added a timeline reset, and a timeline ‘Start’ function into the function. You can remove your other Mouse Click actions since we can handle resetting the timeline with the Hype API:

var currentHeight = hypeDocument.getCurrentSceneHeight();
if (currentHeight == '550px') {
	hypeDocument.setCurrentSceneHeight('80px');
	hypeDocument.goToTimeInTimelineNamed(0, 'Mac')
} else {
	hypeDocument.setCurrentSceneHeight('550px');
	hypeDocument.startTimelineNamed('Mac', hypeDocument.kDirectionForward);
	// window.scrollTo(0, 475);
}

information box-daniel.hype.zip (27.1 KB)

[Seven]

thanks a lot @MaxZieb and @Daniel ! in the preview everything works fine, but when I export it as an OAM widget and paste it into my Wordpress blog entry, the text underneath won’t move.

[MaxZieb (Loves Hype)]

That is duo to the extension method see

Extend Tumult Hype with JavaScript: hypeDocument.extensions

Hello Everybody, given some back and forth on a good way to extend Hype and allow modularity we (@MarkHunte, @MaxZieb) are starting this little project as a board thread. One could move things to GitHub or so but that adds another layer of abstraction and this thread is about inclusion. Anyways one will have to see if this thread picks up any traction anyways. Purpose of the Project A modular way to extend Hype with functions that follow some simple rules. Rules of participation Try to keep…

If you can’t use the head html (Method best case) and embedding as DIV through OAM does just that so you need to inline the extensions into an init function (Method: Quick and dirty).

I fixed the file and added an option for different heights based on Layout.

information_box_max_2.hype.zip (27,0 KB)

[Seven]

thanks you so much @MaxZieb! It works fantastic! Also thank you again @Daniel!