Multiple animations: load hype-lib with only once?

Exporting & Previewing
1

Hi,
We would like to use several small hype animations on one page. For a normal export of the animations, each animation would load the hype-lib (for example HYPE-584.thin.min.js), which would be unnecessary and unpleasant in our case. Is it possible to prevent this? Maybe by an export script?
Best regards
Tine

2

Hype automatically does this as long as they are all exported with the same version and not embedded within an iframe (copy/pasting the <div> from the .html export).

3

Thanks for your response!
Would the lib not be loaded by every hype animation before it starts?
Though then all of the same source, but isn’t that the prerequisite for animation start?

4

Here’s a condensed version on how Hype animation loading works:

  1. The entry point to the Hype animation is the *_hype_generated_script.js file. This contains the data for all your animations and elements, along with a little bit of code to help manage loading the runtime. This gets loaded first.
  2. This looks to see if the Hype runtime (say HYPE-584.thin.min.js) has been loaded yet.
  3. The runtime is object-oriented, so it looks to see if the HYPE object exists, and if so, it makes a new instance for the specific animation and kicks off the animation.
  4. If it has not been loaded, then it makes a list of animations to start later, and puts itself on that list. Then it sets a variable saying that it is in progress with being loaded. Finally, it initiates the download.
  5. If another animation comes along (driven by *_hype_generated_script.js) it will see that the download is in progress, and will simply add itself onto the list of animations to start later.
  6. When the runtime is done being downloaded and parsed, it will then create a new HYPE instance for each of the animations on the start later list, and then starts them. (Any animations that come in later are step #3)

So in this regard, there is an amount of “loading” that has to be done with the runtime for each animation - mainly setting up state and kicking off animations. But it does not need to do the heaviest steps of a network download and parsing the script.

There’s a little bit of extra magic that happens if you have two identical animations on the same page. When the second one is loaded, Hype will notice that there is a conflict in the names and ids. Hype will change the ids for the second animation so it will continue to work in most cases. (this is part of the reason for the hypeDocument.getElementById() API instead of just using the javascript document.getElementById() - we can keep track of what was intended and return the correct element, even if the Hype runtime changed it under-the-hood).

4 Likes
5

Great info - Thank You!

6

@jonathan there is a way to know the name of the second ID ['indexname....'] of the animation? or another way to set an automatic numbering?

I improved my project and all elements are managed with hypeDocument.getElementById () but my external JS triggers all instances in the page in the same way, if I add the scene name
var hypeDocument = HYPE.documents ['indexname']; obviously only the first one starts.

thank you!

7

I’m not positive what you need; but maybe this info can help… let’s say you’ve got an HTML page that has two references to identical Hype animations and even use the same main container ID:

	<div id="untitled_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="Untitled.hyperesources/untitled_hype_generated_script.js?57711"></script>
	</div>

	<div id="untitled_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="Untitled.hyperesources/untitled_hype_generated_script.js?57711"></script>
	</div>

Hype’s runtime is smart enough to make this work.

In this case, a look at HYPE.documents would yield two:

> console.log(HYPE.documents)
[Log] {Untitled: Object, Untitled-1: Object}

As you can see, it assigned a new name for the second one.

You could then access the container itself via the .documentId() call:

> for(var key in HYPE.documents) { console.log(HYPE.documents[key].documentId()); }
[Log] untitled_hype_container
[Log] untitled_hype_container-1

These are the strict element IDs. Given these, you would need to have some knowledge to know which is which, like you could use the DOM ordering or something like that. All that said if you at least assign unique element IDs to the main container divs you’ll easily be able to identify them.

8

Thanks @jonathan
my animations is index123_hype_container and the instances are index123_hype_container-1 ,-2 ....

I have already added a custom ID as an animation container and I need to understand how to perosnalize the external JS. Thank you for pointing me in the right direction!

1 Like
9

Just to clarify - you’re good now? :slight_smile:

1 Like
10

I’m working on it. now I can duplicate the animation correctly (-1, -2 …). I inserted the animation into a customizable ID, this is that what you meant? thanks again for the support!

<div id="%id=customid%">
		<div id="index123_hype_container" class="%id% HYPE_document"></div>
		</div>
11

if you’ve got any identifier directly on the ‘xx_hype_container’ say a data-attribute:

<div id="karlocleverostern_hype_container" data-test="first" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="karloCleverOstern.hyperesources/karlocleverostern_hype_generated_script.js?48089"></script>
	</div>


	<div id="karlocleverostern_hype_container" data-test="second" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="hkarloCleverOstern.hyperesources/karlocleverostern_hype_generated_script.js?48089"></script>

you can easily get the instance by the code @jonathan provided:

for(var key in HYPE.documents) { 
var hypeDocId = HYPE.documents[key].documentId(); 
var hypeDocWrapperElement = document.getElementById(hypeDocId);
var hypeDocDataAttribute = hypeDocWrapperElement.getAttribute('data-test');
switch(hypeDocDataAttribute){
case 'first' : /*do something*/ ; break;
case 'second' : /*do something*/ ; break;
default: break
}
}
1 Like
12

@h_classen thanks!
this is the JS ( outside the hype animation) that trigger the animation

function myCallback(hypeDocument, element, event) {

    hypeDocument.showSceneNamed('animation_number_123');
    hypeDocument.startTimelineNamed('timeline_number_123');
    hypeDocument.triggerCustomBehaviorNamed('cb_glow-on-off_123');
	
	hypeDocument.getElementById('theme_title_part3').innerHTML = "titlevalue_123" ;
	hypeDocument.getElementById('theme_title_part2').innerHTML = "titlevalue_123" ;
	hypeDocument.getElementById('theme_title_part1').innerHTML = "titlevalue_123" ;
	hypeDocument.getElementById('theme_slogan').innerHTML = "sloganvalue_123" ;
	
	hypeDocument.getElementById('theme_slogan').innerHTML = "sloganvalue_123" ;	
	
	return false;
  }
  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});

I must add all events in each of this?

case 'first' : /*do something*/ ; break;
case 'second' : /*do something*/ ; break;

furthermore I cannot predict how many instances will be created but I can define a maximum number

thanks!

13

If you are doing something custom for each, you'll naturally need to add code to specify each Hype document.

Another approach that might be easier to edit is setting up a global dictionary in a javascript file (or the html head) that is keyed by the document name, or an array by index if you don't need specific naming. This will avoid switch/case if that's not your bag.

1 Like
14

I'm working on it

Stacks needs a elements called via plist and not in the HTML ( in order to allow istances). but Hype works only with JS in the html file. So, now I use the hype routine to duplicate the ID but the console in Stacks give me an error because the ID renaming is recognizable only in preview.

So, I have to manage all elements via Plist/script.js and not in the html file to avoid issues.