Help: My animation is no longer displayed in the browser?

Hello,

My animation was displayed normally in all browsers but, after defining responsive options, it no longer appears in browsers?

I tried everything but it does not work.

Regards
test-anim-invisible.hype.zip (113.5 KB)

Hey Pierre:

When you setup a flexible layout and define scaling on a group, it adjusts that group size based on the viewport size. So when your group is really small in relation to the scene size, your group will shrink further when the browser size is made smaller (and disappear on some browser sizes). That’s what’s happening in your large layout:

So to fix this, I recommend making your scene shorter and adjusting the position of your group so that it is in the center and the group boundaries are aligned on the scene as well:

You’ll need to do this also for your smaller layouts also so that the group is aligned.

test-anim-invisible.hype 2.zip (125.7 KB)

Thank you for your reply !

I did a lot of tests to try to understand better.

In this new file, the size PC (and iPad) is ok but for iphone, the sides of the logo are cut (test on Chrome> Tools for developers> Toogle device toolbar)
test-anim-pcd-responsive.hype.zip (95.1 KB)

This has to do with an interaction between your scene having the width/height scales as 50%, and the element also having a 50% scale on it. The flexible layout scaling isn’t taking the group element scale into account when making its calculations, and the 50% scene size is then cutting off the size.

The workaround would be to either use a 100% scene size scale, or to set the element to 100% scale width/height and resize the elements inside (using the “position” width/height instead of the scale transform).

I’ve filed this as a bug to investigate further.

Merci Jonathan,

It’s very frustrating, I tried to find a solution for several hours. But overall, I do not understand why it is so complicated to make a group of elements simply resizable for all screens.
Also, as we are forced to group the elements, if we want to make subsequent changes, we sometimes need to ungroup the elements and then redefine the responsive options.

And if I want to reduce a group of elements homothetically, I have to group them, otherwise, each element is reduced independently, on its position.

Finally, if I group elements to reduce them homothetically, when I disembowel them, they resume their initial size.

Il faut donc être certain de travailler à 100% avant de commencer le travail, sinon il y a un vrai pb.

Thanks for the feedback - I’d definitely like to improve the grouping/resizing behavior. There are times that the HTML structure can be at odds with a good editing experience. From a flexibility standpoint, simple scaling is often desired but does not give much power to better arrange how elements behave.

Do note that if you multiple select items and resize, they will all proportionately resize together.

Yes, the items will be resized proportionally but individually, they will not keep their place in the group. And you know that all major applications do not work like that.

Otherwise, I reworked my animation by returning to the original size of 100%. But if it works when I launch the display from Hype, it does not work when I import my animation on the site.

I do not really know what else to do. My animation is over for two days, this is the last real pb.
test-anim-invisible-3.hype.zip (77.0 KB)

Thanks

@mengeco

Hi Pierre!

I’m not sure of all the details of your layout goals - but see if this demo is getting close…

Overall goal - As I understand it:
Keep the logo from disappearing - or being clipped - in the different layouts.

Demo: test-anim-invisible_JHS.hype.zip (110.3 KB)

You mentioned that if it worked in Hype’s “Preview” then it did not work on a server (or vice-versa?). So I have included both here and they seem to work the same.

Here is the online version.


General overview
Each layout is at 100% scale & all adjustments are in the “Flexible Layout” section of the “Metrics Inspector”. There also is a tiny bit of CSS in the “Head HTML” that is used in conjunction with the “Standard” layout in which the logo “Group” element has been given a class of “standardLogo”.

<style>
	.standardLogo {
	margin-top: 120px !important;
	}
</style>

This CSS prevents the logo “Group” from floating out of view.

Rather than explain here in detail the settings used in the Demo project I think it would be simpler for You to review the attached file.


Note: To prevent the “Portrait iPad” layout (768 px and up) from shrinking just use the “Expand to Fill” option in the “Flexible Layout” section instead of the current “Shrink to Fit” setting… which means You will need another breakpoint also - so the logo doesn’t get too large.

Hello Jim,

Thank you very much, the size is ok but your animation does not appear in the browser 'after integration in .oam)

I use the Wordpress plugin: “Tumult Hype Animations”

I did several tests:

  • unbundling animation
  • remove responsive options

I attach a file that is displayed well but if we group elements and we add the responsive options, it no longer appears in the browser.

The bp seems very complex :frowning:
test-display-ok.hype.zip (57.9 KB)

Finally, I found the bug: in the options of the scene, if I select 100% in the scale options, the animation is displayed on the browser but after publication in .oam in the site, it is not more displays on browsers.
14

The troubleshooting section on this post has some guidance: Tumult Hype Animations Wordpress Plugin

Using a percentage-based height in a responsive document may cause issues. If possible, only set scaling on the width dimension for your document.

If you uncheck the 'height' scaling checkbox, does this work?

Another note regarding what @JimScott shared: When you embed your OAM widget normally in the Wordpress plugin, there is no CSS included. So any CSS that Jim included would need to be added to your Wordpress site's style.css file. Or, you could insert it (the css Jim included below) within the innerHTML of a rectangle, but that's not the recommended method.

Thanks for your precisions,

If I uncheck the%, it works fine but I spent long hours to understand why my animation was visible in test from Hype and invisible from a .oam file.

The CSS proposed by @JimScott was only anecdotal and now that I have the solution to the display, CSS is useless.