Making Hype animations load smoothly and removing above the fold blocking

[Daniel]

Very cool site!

@Pathfinder

Is this due to iframe browser security limitations with the script? Is it possible to get around this? Could I set the source of this iFrame after the hype animation is loaded?

Vimeo embeds can be placed directly within the inner HTML of a rectangle. Embedding their embed code within an HTML widget results in a double iframe and that causes issues.

@Pathfinder

Lastly, I found that despite setting my SVG elements to be hidden in Hype before animating, there would be a brief ‘Flash’ as the site loaded.

We'd be happy to look into this to see why this is happening. Are you setting opacity or display to hide the elements?

@Pathfinder

In most browsers I eliminated this by creating a white SVG rectangle to appear above these and then hide this instead when animation starts.

Another option is to create a blank scene which transitions to the next scene (either via crossfade or 'instant'ly) when the scene is loaded. This sets up elements in the DOM for scene one and two, and transitions to the next scene only after any preloading has completed.

@Pathfinder

I found out by accident that I didn’t need the full HYPE-590.full.min.js file. Instead I used just the HYPE-590.thin.min.js file.

This is exported if any of these are true:

• You are supporting IE 6-8 in the export process (only IE 6-8 loads this)
• You are using Physics

This post has more detail: Banner ad file optimization: What are full.min.js and thin.min.js for? - #3 by jonathan