How to use same Animation multiple times on same page?


I want to use/embed a little Animation I made in multiple Div's on the same page. It seems like its only working on the first div I place it. Think it's because the container uses an ID and that causes duplicate ID's on the page. Why does the container even use an ID instead of a class? :neutral_face:

Any workaround?


??? though Hypes runtime should change the id if they are identical

you may post a link containing two or more instances ...

To elaborate on what @h_classen said; Hype does a lot of work to allow identical animations to operate on the same page. Hype's runtime will actually rename the main container ID if it encounters a duplicate. Hype will also do the same for manually assigned IDs via the Identity Inspector panel, but you would need to use the hypeDocument version of getElementById() to properly look those up.

Feel free to post a sample URL where you find this to be failing, along with a zip of your .hype document as possible.

1 Like

encapsulating instances in an iFrame (though not ideal) seems to be the most reliable solution here ... depends on what you're doing ... with your hypefiles

If you are referring to the id that is found in the regular export in the section to copy to a page surrounding the script tag. That is actually modified once the script executes in place and finds that it is a duplicate. If you look at the elements in your inspector of choice you can actually see the changed ID. The same happens for IDs you assign throughout your document. That is why Hype had to build a "lookup" table for the changes it makes to the ID and arte duplicated (like from layout to layout or scene to scene) and that is why you need to use hypeDocument.getElementById instead of document.getElementById inside of your project code. The Hype version goes through the lookup instead of doing a direct DOM lookup. Apart of that… I am a CSS class person myself. Always prefer them over ID's. :smiley: