Problems with responsive animation on phones - Wordpress site

Responsive
1

I am having an issue with an animation I made for an advertiser on my site. If I view it from the server using the exported html document, the animation behaves properly on all devices. It behaves properly when viewed on an iPhone using the Hype Reflect app.

If I embed the code in a post or page on the site (It’s a Wordpress v4.1 self-hosted on Hostgator) the animation looks fine on desktop and tablets, but doesn’t scale down on phones.

I’ve tried both the div and iframe methods shown in the tutorials here and elsewhere, but I get the same result from both methods.

Can anyone offer some advice or insight?

2

Can you share a link?

3

[Direct Link to the Hype generated html page using the provided div code:][1]

[This is a link to my test page with both div and iframe samples using both pixel dimensions and percentages for the size parameters.][2]

4

Our documentation has helpful chapters on Flexible Layouts and Responsive Layouts which will help you create a Tumult Hype document that can resize based on the size of its container: http://tumult.com/hype/documentation/

Once you set that up, your embed code will be based in Percentages, not pixels. I recommend only scaling down the width of your document if you choose to go with flexible layouts.

5

Thank you Daniel, I have already read the information at the link you provided … when I selected the scale property on the animation in question … it would no longer hide the overflow on my animation. Plus, it did not help scale the animation down when viewed from my wordpress on my phone … yet it works properly when viewed directly from the html page exported by Hype.

This behavior is identical on two different WP sites that I work with. One has several third party plugins and a custom pro theme … the other is a very basic site using the canned TwentyTwelve theme.

I have a feeling that there is either a div or js conflict … I was hoping someone could point me in the right direction where to look.

6

It would be great if you could post a responsive version of your document on that demo site so I can see what's going wrong.

Can you clarify what you mean by this?

7

That was my issue … I did not have the overflow set properly, I was able to fix that portion. I only had it set for one of the three scenes.

I’m still baffled why it works perfectly from the generated html file, but refuses to scale down in the wordpress page.

I did add the newest version … it is at the bottom … won’t even display in the div form … only iframe.

8

One thing that might help is if you change this value in your theme:

	<meta name="viewport" content="width=device-width,initial-scale=1" />

Change that do something like

	<meta name="viewport" content="initial-scale=1, width=420" />

It is kind of hard to tell when it is scaling because your document has no elements that scale or resize based on the width of the document: http://therecord-online.com/site/wp-content/uploads/test3.html

9

I appreciate the advice, though, I am not confident that I should be adjusting the code in my theme as ALL other elements I use in the site scale properly … it is ONLY this animation I created with Hype that is causing issues.

I’ll have to go back to creating my motion ads internally with the WP plugin … I had hoped to upgrade to Hype Professional and begin creating ads that could be used by my advertisers on other sites … but frankly, I don’t have the time to invest in further training and troubleshooting right now … just too many tasks at hand that free time is at a premium.

Thanks for your help … I’ll just have to put my plans for adopting Hype on hold for bit longer when I have the time to properly invest in learning the finer details of the app …

10

I had an event cancelled due to the weather today and decided to do the in-app upgrade to Hype Pro and spent the day working with it.

Using the Responsive layout options with the proper breakpoints solved my issues.

I really like the app and think it’s going to offer some great options for our site’s advertisers as well as content generation.

3 Likes
11

thanks, glad to hear it!