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


(Seven) #1

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.


(Loves Hype) #2

Have a look here


(Seven) #3

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!


#4

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) #6

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


(Loves Hype) #7

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.


#8

Done :wink:


#9

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) #10

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.


(Loves Hype) #11

That is duo to the extension method see

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) #12

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