Export to exclude HYPE-458.thin.min

Using JavaScript with Hype
1

I am creating a polymer web component experiment and created a animated feature in hype 3.
I exported it to html and it created a folder structure with a number of files.
One of these files is HYPE-458.thin.min.js
Since I will have several instances of the object and i hope other hype created components, I want to include the HYPE-458.thin.min.js file in the index.html.

The hype export should thus only deal with what it needs for the animation and allow me to load the resource required.

Is it possible to export the animation so that it does not try and load HYPE-458.thin.min.js.
Currently it is given me a error

menuitem_hype_generated_script.js?72854:4 kmenuitem_hype_generated_script.js?72854:6 (anonymous function)menuitem_hype_generated_script.js?72854:6 (anonymous function)

i want to move HYPE-458.thin.min.js to my source folder anyway so that I only need to load it once but all hype animations can make use of it.

Do you have any examples of where you are using hype 3 animations in polymer web components?

2

I’m not too familiar with polymer, but here’s some information that will hopefully be useful:

HYPE-458.thin.min.js is the main runtime file which drives all Hype animations. As you noticed, it is not loaded first, the *_hype_generated_script.js is called in the HTML and this contains all animation data and kicks off loading the runtime. The reason for the loader is twofold - to restrict loading the runtime only once (for performance and correctness reasons), and also to load the appropriate variant -the “thin” version is the minimal runtime to keep the download size small whereas the “full” version contains support for Physics-based animations and IE6-9 browsers.

As the loader does check to see if the runtime has already loaded, you could simply add a script tag to your .html document head which will load the runtime ahead of the loader check. It would just look like:

<script src = "DOCUMENT_NAME.hyperesources/HYPE-458.thin.min.js"></script>

Again, this must be above/before the *_hype_generated_script.js gets loaded. You also need to be very sure you’re loading the right version; I’d personally just recommend using the full version instead of the thin version. Also do note that we now encode the version number so the loader will match up with the animation so if you’re integrating into some system and we release a new version of Hype, you’ll also need to account for this.

Let me know if this is clear and helps make the web component; if not I’m happy to look further into polymer.