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.