Animation expanding once pressed on mobile or tablet

Hi,
Ive made an animation and put it on a website I’ve been working on. (https://www.wills.net.au/10years/ animation is the last one on the bottom of the page with the different buildings and descriptions).

On mobile and tablets whenever you tap or hover on the animation using your finger the animations expands to a huge size.

I have all the content grouped, scale width checked to 100%, flexible layout enabled with shrink to fit. I have also used 4 layouts: iPhone, iPad portrait, iPad landscape and Desktop.

Projects Montage copy.zip (2.9 MB)

Any thoughts?
Thanks heaps

I took a quick look but wasn’t able to figure out what was happening; it is clearly choosing the wrong layout but due to the complexity of the page I don’t know why. There’s two things you could do:

  1. Try putting the Hype document within an iframe. Instead of embedding on the page directly, you could just have an iframe element contain Hype’s exported .html file. I suspect this would find the right size for the scene.

  2. Use a single scene, and show/hide the labels via timelines.

Hope that helps!

Thanks Jonathan, yeah its pretty complex but I’ve put it in an iframe and seems to be working, just has some weird padding space on the bottom but it will do for now :grinning:

Thanks heaps for your help!

2 Likes