Hype and Ionic 4 Responsive

Exporting & Previewing Mobile Apps
,
1

Hello,
I have retrieved the export files from a hype project that I need to insert into an ionic project.
I added in an iframe, it works but the responsive doesn’t work, how to resize the animation without going through hype software?

2

It would be useful to get your project or at least see a current URL. I don’t have specific experience with Ionic, but the two primary items would be:

  • (Perhaps obvious, but worth mentioning) make sure that the iframe itself is responsive and changing sizes.

  • Hype’s responsiveness is tied to the resize event; this is generally triggered on window size changes or orientation changes for mobile devices. If it is the case that you need it to change not on these, then you will need to use this API to inform Hype that its parent container has changed size and needs to relayout:

    hypeDocument.relayoutIfNecessary()

    hypeDocument is an document object that can be found via HYPE.documents["documentName"]; you could probably loop all the documents in this case though so you don’t need to worry about the specific name.

    Communicating to the iframe might be a little tricky; you will probably need to send a postmessage() and have the child HTML respond to it.

I hope that points you in the right direction!

1 Like
3

Thank you for your reply.
I import the animations in an angular project in an iframe by calling the .html of the hype project in the source of iframe
iframe is well responsive, I cannot resize even in a simple html page.
Responsive design works, but I would like to resize the entire animation, the changes do not apply to the animation.
Do you have another lead? an example to show me?

4

You’ve got a Link? Ist the hypesetup responsive?

5

Hello
Thanks for your help
Here is the link, just by integrating in a simple html page
http://lezardsemelle.fr/hype-resize/test.html

6

hm, neither the iframe nor the hypedock have responsive settings ! what do you expect?

7

Sorry, I hadn’t updated.
I want to resize the animation but it doesn’t work

8

The Hypefile does not seem to be responsive. ..
You can run a Script weithin the iframedocument that Transform scales the entire hypediv. Further you'll Need to postMessage the new height to the Parent of the iframe and Set the new height

////
i'd guess you can those lines for the Hypedoc

and then :

1 Like
9

Thanks for your feedback. I’ll try this! and I’m coming back to you!

10

i you'd like to avoid to setup your own post messaging:

to mention: of course the hypedoc itsself needs to resize or be resized to make it work ...