Stop repeat of animation when changing scenes and scalability issue

(Joe Rademan) #1

I am working on my first animation using Hype and encountered a couple of issues. It appears that GoDaddy WordPress hosting may block javascript from the uploads folder. I had to add animation in a WordPress site using an iframe that points to the root of a non-WordPress site.

First issue, when returning to the animation from a scene, the main animation starts from the beginning again. Is there a way to stop that?

Second, I cannot get the animation to scale. I am using the 100% property in the iframe but it does not scale the animation. I reviewed the pinning and scaling video but I cannot get that option to appear for the entire animation, only for individual elements.

Here’s the draft of the animation:

Here’s the content loaded into the iframe:


For this situation, I recommend using responsive layouts. Your document will change based on the width of its container (in your case, the iframe). If you pair this with flexible layouts, then you can fit multiple widths.

You should be able to place your document in a regular div. As far as I know, GoDaddy doesn’t restrict what you can place in your wp-uploads folder. Can you share the source URL of your JavaScript file when you place it on your server?

Whenever you load a scene, the main timeline will run. If you have an intro animation that you don’t want to run each time, just make sure that intro scene is first. You can then switch to the second scene by using a timeline action. Alternate timelines are also useful for changing scene load behavior (or running an animation only on that scene’s first load).