[SOLVED] Unload Hype animation ( vue, react, nuxt, next )


#1

Hello All !

I’m playing around with hype and vuejs and it works really well !
I have a little issue though, when leaving the page with the animation, the animation dom is destroyed but the different event listeners are not removed causing a quantity of logs to appear in the console.
I already manage to access the animation to play and pause it but I tried to look in the documentation and in the forum and i could not find anything about unloading a Hype Document.

Would anyone know about a way of doing this in javascript outside of the hype animation ?

thanks in advance


(Loves Hype) #2

This is a known issue… search the forum on VUE or GARBAGE COLLECTION.

Regards


#3

Thanks for the quick reply !

Although the issue seems to be related to the fact that none of the event listeners are removed and that there are absolutely no function in the api that allows the removal or unload of the animation.

regards


(Loves Hype) #4

For now we are stuck with that situation. Meaning you can do a manual cleanup as far as possible and rely on the browser todo the rest … and hope for not to many refresh from your shadow DOM as that drains on the performance. Did that while embedding Hype into the Twine Engine (was neglectable in that case). Other solution is to embed a VUE app into Hype (other way around) avoiding reloads but triggering things from VUE in direction towards Hype (living outside of the VUE managed scope). Not ideal at this point but a possibility …

Hopefully we get some sort of clean exit/unload etc. one day.


#5

Allright,

to give you more context i’m currently working with nuxt (an ssr wrapper for vue). I’m inserting the Hype animation within the page using the div in the generated html document and inserting the script whenever the div is rendered and available and adding an event listener to play the animation whenever all the elements are loaded.

I’m going to try and embedding the Html file within an iframe hoping that the event listeners will be bound to it and that destroying it will be working. (I’ll keep you informed of the progress)

Would you happend to know for what reason the unload methods do not exist ? (Is it more of a technical limitation due to the way the js animation is generated or is it not yet implemented ?)
[ any insights on the subject @jonathan @Daniel ? ]


(Pete) #6

flattering words :slight_smile:


(Loves Hype) #7

Highly technical term… :man_student: :nerd_face:


(Jonathan Deutsch) #8

(Let’s stay on topic.)

In the needs of Vue/React, a Hype “unload” feature would most likely have the meaning of keeping all the state, but performing an entire document pause. The Hype runtime would still be in memory, but inactive. When loaded back, it would rebuild the DOM based on the saved state and resume the animations. This would handle a case of wanting to go back exactly where you were in the Hype document.

Primarily this isn’t implemented because Hype was built in a time before React existed and didn’t have to deal with the DOM changing behind its back. Hype always assumes its DOM is there :slight_smile:.

I wouldn’t give any promises to a release date or commitment on the feature, but I’d definitely like to play nice with DOM/React.

The other method you describe should work fine – just use an iframe. This won’t let you save/restore state, but you can do this yourself if need be.

So Hype can handle its animations in React, but not the more useful case of returning where one left off.


#9

Hi again !

Thanks for the thorough answer @jonathan, really appreciate!

So i’ve embed the exported animation inside an iFrame like recommended and it works like a charm ( doesn’t feel really clean though hahah ).
As the animation state doesn’t matter to me it was the perfect solution ( and i can still access the hype context within the iframe using iframe.contentWindow to go to a specific moment of the animation :ok_hand:).

Thanks for all,
Keep up with the good work

Lafeuille


(Jonathan Deutsch) #10

Great, glad that was a solution for you!