Hello everyone!
I am working on a client landing page for customer education. The landing page is built on WordPress and contains two hype animations imported with the Tumult Hype WordPress Plugin.
While I followed the instructions to wrap each scene in flexible divs and specified the min-height on the WordPress custom code section, I noticed that while the div min height is working, the actual animation is not expanding, creating huge gaps between the other blocks in the page.
You can view the live review site here:https://wattsmarthomes.com/heat-pump-comfort/. Any help you can provide would be so helpful! We considered many other tools before landing on Tumult Hype, and by far, this is the only html5 tool out there that met all of our project needs.
File attached. I couldn't upload the second interactive due to size, but the setup is the same (groups with flexible layouts). interactive02_responsive.zip (1.2 MB)
This solution by @h_classen should help resolve this (place the code in the 'head' of your Wordpress page or above your Wordpress shortcode as a code block:
Hello, and thanks for getting back to me. I do not have access to the head of the WordPress site, only the custom CSS area. I am also unable to add a code block - please bear in mind this is a client website... Is there a way to implement the code from Hype? Perhaps by adding to the head HTML document for the animation?
If you select the block type 'code' then you can paste that in and it should have the same effect as though you were adding it to the 'head'. It just needs to be loaded prior to the Hype document in the DOM order.
Hey there, since then, this is what I have done with a new project, but the issue has not yet been resolved (sort of evolved? ) (hype resizes but now has huge white space under):
Set up the hype document using 100% scale + height. Constrain ratio is checked.
All items within scene grouped / hidden overflow
All pins and arrows highlighted. Shrink to Fit + Zoom contents selected.
Added h_classen's script to the head of the Hype script
*Added a div wrapper around the Hype document on the text block (no HTML blocks possible on this site - they use a custom theme with "flex blocks"). The div wrapper has a custom CSS class with a max-height of 720px, which is the height of the original hype file. WHEN I did not do this, the hype file displays with a scrollbar, only showing a portion of the file.
Here is the new client project. The specific hype file in question is the Energy Showdown game: Whats a Watt - Wattsmart Home.
this is your setup. so you hypedoc is wrapped within an iframe. iframes do not behave as normal html-elements as they can not expand their height corresponding to its content ... so resizing the hypedoc will not have any effect on the parent side!
if it's just about proportional resizing you can try a css approach on the iframe.
easiest, but not supported in older browsers is aspect-ratio ...
I also wanted to mention that I had to wrap my hype file in the iframe to ensure @MaxZiebreactive plugin worked (helped me implement the score tracking ). If there's a known workaround for this, please let me know.
). If there's a known workaround for this, please let me know.