Hype animation, InDesign and Publish Online

One of the things that always bothers me about Adobe’s “Publish Online” is how vector images are rasterized during upload. Thin lines become clunky and fat and nice clean vector images are fuzzy on HiDPI displays. I’m not entirely sure why SVG files are not supported since it seems like a pretty universal file format. Anyway, in order to work around this restriction I figured I would embed a Hype animation into an InDesign document using SVG images and exported as an OAM file. I started working on a business letterhead with simple animation across the top…

https://indd.adobe.com/view/33deddc1-182c-430c-9f01-40d6191ea315

I imported the animation into InDesign and had some problems getting it to fit and size properly. I used the pinning and sizing features within Hype but the animation floated or simply refused to adjust to different screen widths. My “solution" was to make the animation the same size as the InDesign page (612px x 792px) even though it is only a fraction of that larger size. I set the pinning and sizing as shown. Here are the problems:

  1. While it seems to work fine on a desktop screen at a larger size, it starts to fall apart when the viewport is resized. The animation doesn’t want to adjust properly to the new, smaller size.

  2. The animation does not work at all on a mobile iOS device. (Oddly, the “CREATIVE CLUB” type appears, but nothing else.)

I’m curious hear anyone else’s experiences with Hype animations within InDesign and using Publish Online. Are there any “tips and tricks” to getting things to stay put? Is there a way to “hack” an OAM file so that it plays on a mobile device? I was reading about a method in this forum, but it pertained to an EPUB document. Thanks!

When you export a regular HTML page to your computer, how does it behave when resizing? Does it work correctly?
It looks like the SVGs are scaling down in size individually -- can you group them as one element and set scaling on that singular element instead?

If you can share your document that would be great -- I have heard that there are sometimes issues displaying animated SVGs in Firefox (it prefers regular inline SVGs, and not a SVG set as a background image) but that doesn't seem to apply to you.

Actually, it doesn't work well at all and I'm not entirely sure what I'm doing wrong. Perhaps I'm swimming in the deep end when I should be wading in the shallows? I only started working in Hype a couple of weeks ago. :slight_smile:

I grouped all of the elements together and applied sizing to the group, but they don't want to behave. I've attached the Hype doc. Thanks for looking at it! --T

bigwig_logo_anim-red2.zip (29.1 KB)

For your non-moving group, I think it would be better setup as this:

You should also setup your group boundary to be the full width of your document – this will keep its sizing at a specific ratio of the available width.

For the moving Red element, it may not have been appearing because individual elements within the group were set to scale – this may have had the effect of making the elements have a 0 width and height so they were effectively invisible. Setting the flex layout properties just on the higher level groups in your document should result in more dependable effects.

bigwig_logo_anim-red2.zip (42.9 KB)

When publishing to Indesign, the frame in which your Hype document appears is also scaled down – this might have been what was making the initial text disappear.

1 Like

Perfect! Thanks so much, Daniel! I never would have thought to change the bounding box of the group. And I clearly need to spend more time with sizing and pinning, ha! It is now working on the phone as expected and having vectors display properly in Publish Online is a big deal for me.

https://indd.adobe.com/view/33deddc1-182c-430c-9f01-40d6191ea315

1 Like