I was using Hype many years ago, and now back at it with version 4. I am primarily a front-end designer, using Hype for CSS-animation/infographics as small components on the site, using VueJS as framework.
Is export/import as ES5/ES6 components in the pipeline? I`d rather use the Hype animations as components, instead of incorporating the entire site into the Hype document in which I feel is the reccommended solution. With a component-based structure, it would be beneficial with hooks such as Hype.start(), Hype.stop() (etc).
Being a single page application, when changing view, I currently load/unload the scripts on enter/leave. This causes the HYPE library to sometimes crash, causing the console to garble up with reference errors. Running iFrames is a disencouraged practice on my part (hello the 90s).
Please advice if this is something that is already possible, or in the pipeline as it is of major importance to me (and surely other front devs must feel the same) in continuing use of Hype. I will upgrade to a Pro license in a blink if that is possible there.
Thank you in advance in any input you may provide.
Thank you Max for your input! I have read the posts you are reffering to , but the use case is switched around unfortunately. With a dev stack consisting of VS Code, Node, Webpack and VueJ, it is in my opinion not a good idea to base a whole web application around Hype.
The solution is currently employ, is using a script loader inside of a Vue component. This way I can import it, specifying the document, and have multiple instances running: <VueHype hype="<nameOfScript>" />
I have uploaded my component to a github-repo if anyone is interested:
I do consider this a ‘hacky’ way of doing it, and I would much more prefer to import the script from a JS package like all nice things are
Yes, I see but that might be very problematic. As VUE is in control of initalizing and destroying the Hype Instance at the root. Meaning you reinitialize the IIFE that renders Hype and thereby you destroy the instance and the state in it. Hype isn’t built around graceful unloading itself. If you just remove it from the DOM consider that the runtime is still in memory and managing states and nodes that you have removed from the page.
Thank you Max for the detailed explanation, it definitely matches my observations as the page draws too much system resources in this limbo-state. It is basically the purpose of the question, if it is somehow able to modularize the hype document/scene; either if it is a plan for Hype in the future, or if it can be managed by a custom export script.
I would happily assist in the latter if such a thing is feasable.
Your welcome. If you are on a developer path rather then being a designer and value modularity then I would suggest to use a animation engine built for reactive libraries. This way you can build the structure through Vue/React in a template and edit any hook and variable outputs directly in your pipeline setup.
If you need the versatility to work on graphical stuff in an editor … SVG-Container is always an path to go. This way a separate designer (or the designer in yourself) can edit with the added benefits of a GUI and still have a file that is made up of markup. If you go down that route it is important to use consistent names, id’s and classes in your graphical package of choice. I know that Illustrator and Sketch offer this functionality. Meaning if you plan on animating a specific part of an SVG give it a descriptive name and the address it from your reactive animation library.
There are also some editors out there that allow visual animation of SVG and produce a function representing the animation. If you want to have that in a GUI too.
Another (untested) idea would be to write a Vue component that embeds a Hype Document but has a little added “awarness” of the loading state of the Hype Document. Meaning if the Hype Document has unfolded itself producing its’ markup one would save that markup rather the sending it to the garbage collector. Hype itself has a similiar strategy when dealing with permanent Symbols that are remove from stage. It pushes them to a hidden DIV Container and pulls them out once it needs them again. So the Vue Component could do the same. On destroy it would “look” if there is Hype Document Markup (a query withing the Vue component) or if done with a callback (“HypeDocumentLoad” to register the successful load and hypeDocument.documentId with a Vue lookup) and move the whole node to a hidden DIV outside the VUE application. If you ever revisit the same Vue page containing the same Hype Document you treat it like a singleton and before initializing it “look” into your hidden DIV if the needed Hype Document is present there already. Then you just “move” it in to the component rather then running the Hype JS again.
I don’t know if you have the time on hands to investigate or if it is even in your interesst. Also there might be some problems and bumps along the way or it might not even work duo to some unforeseen reason. But it’s an idea.
