I don't use Hype myself but got an export from a designer. I'd like to embed the animation in my React application, but it's super hard to do so:
There's 2/3 scripts, the generated script and the hype library thin/full, and a bunch of assets.
- The generated script executes immediately without a way to call it again, this breaks single-page applications with animations only on part of the site
- The generated script tries to load the hype library from where it was loaded itself, this breaks bundling
- The hype library (version 674 at least) breaks in strict mode (it rewrites the argument list), this breaks minifying via Babel
- The assets are also referenced by path, this breaks bundling
Ideally, there would be an npm library that you can pass an animation folder and a DOM element to, and it would do all the heavy lifting:
- Load Hype if it's not loaded yet
-
require()
all the assets, this should be noticed by the bundler, which would prepare the assets - Run the animation on the provided DOM element
- Unload the animation on request
Right now, this is hard to do. You need to extract the animation from the generated script and change the names of the assets so they load from the assets folder instead of the a current URL (which is virtual since it's a single-page app).
You can't unload the animation at all, and Hype crashes when its DOM elements are missing.
It seems to me that Tumult is selling an application for making animations, and so anything they can do to make the animations easy to use on the web will result in more sales.
I would love it if they open-sourced the Hype library, that would make bundling and embedding way easier, and ideally they'd include a .json file with all the animation and list of assets in the export.
Please consider this, Tumult