Match and track the position of two elements

“Linear” might be a better option under certain circumstances… especially in a repeat loop on the same timeline. If both elements are running the same easing set-up I would think the outcome (positioning, etc.) would be the same.

54%20PM


In any event Hype is a great toolbox - and, as in this post - there are often different approaches that achieve the same result.

a good approach will be to track the element only when activ. a continous check will block browser resources unnecessarily.

two possibilities:

  1. use a mutation observer to check for attribute/style-changes. @MaxZieb provided a extension to simplify … Hype MutationObserver

  2. the easing can be a function. this can be used as a hook … to track and match changes

Here is an example using Hype MutationObserver

HypeMutationObserver-Example.hype.zip (24,9 KB)

2 Likes

Also using this method - Math Equation

position tracking test - MHv1.hype.zip (15.7 KB)

You can even pass arguments to the aliased hype function from thecustom Math Equation so you can run more that one set of elements from the same aliased hype function.

position tracking test - MHv2.hype.zip (18.8 KB)


Another example.

Math Equation

The EllipsePurp & EllipseTeal elements. follows left property

function (t, start, dur) {
   try{
 window.hypFunc('EllipsePurp','EllipseTeal','left')
  }catch(err){
console.log(err)
}
   return t / dur;
}

The EllipsePink & EllipseBlue elements. follows top property

function (t, start, dur) {
   try{
 window.hypFunc('EllipsePink','EllipseBlue','top')
  }catch(err){
console.log(err)
}
   return t / dur;
}

hype function.

 window.hypFunc = function(targetTofollow,follower,prop){
 
 	 
 	 
   var EllipsePin_  = hypeDocument.getElementById(targetTofollow)
  	 
  	 var Prop_ = hypeDocument.getElementProperty(EllipsePin_, prop) 
  
  	   var EllipseBlue_ = hypeDocument.getElementById(follower)  
    hypeDocument.setElementProperty(EllipseBlue_, prop, Prop_, 0, 0)
  }

position tracking test - MHv3.hype.zip (18.2 KB)

2 Likes

somehow i knew this’ll happen :wink: guys!

What…???

… that you and Max would step in and provide the examplefiles for the possibilities that i only mentioned. engaged and helpful! best forum ever :slight_smile:

Can you think of any possibility to avoid the global Mark?

1 Like

Your the ringmaster… :smiley::smiley:

Can you explain…

@h_classen is talking about the window scope your using to intermediate between the Hype Document and the the easing function. Usually not a problem but one tries to avoid it in a general solution. But whatever does the job specially for single cases.

1 Like

Oh that global. There probably is I think I did it that way originally at the time because I did not find one when I was just trying to get it done quickly in a simple way.

I will look…

1 Like
 let hypeDocs = HYPE.documents;
hypeDocs[Object.keys(hypeDocs)[0]]

… should work if only one document is involved (not tested). for multiple instance you’d need to know the key … ! ->¿

True! and then (for more documents) one would have to make sure that the object keys array is sorted the same way just to be sure that index 0 is the same across browser. Not sure how reliable native object keys sorting is but the main problem with that approach is that naming of documents can change or if another document is named with Z or A it would either be appended or inserted at the brining of the list. So it is again page specific and not general.

Directly hardcoding the name of the document instead of the object keys would also be a solution just it would need to catch the case that Hype uses „index“ in previews rather then the export name. Not making live easy for us :slight_smile:

Or just do it like @MarkHunte intended and use a hypeDocument.documenName() Switch in a load callback to hook up the correct global function.

2 Likes

Wow! Thank you so much @MarkHunte for taking the time and energy to do this. It’s fascinating and very helpful! I’m not experienced in this area enough to be able to understand deeply how it all works but at the surface level can see how the relationships between these three blocks of code are established. I’ll experiment with it further. Regards

2 Likes

Looks interesting and really cool! @MaxZieb. Lot’s of flexibility it seems with Hype.

1 Like

For the global pollution… I think this is not a big issue as it is similar to what we do in the head with the call backs there.

So saying that a simple thing to do for more than one hype doc on the webpage would be the hype function as:

 window[hypeDocument.documentName() ]  = function(targetTofollow,follower,prop){
  
   var EllipsePin_  = hypeDocument.getElementById(targetTofollow)
  	 
  	 var Prop_ = hypeDocument.getElementProperty(EllipsePin_, prop) 
  
  	   var EllipseBlue_ = hypeDocument.getElementById(follower)  
    hypeDocument.setElementProperty(EllipseBlue_, prop, Prop_, 0, 0)
  }

And you then just add what you would call the exported file to the Math Equation code as the function name called. Including an OR operator using ‘index’ so we can also run in previews.

function (t, start, dur) {
   try{
   let plc =  window['pa1'] ||  window['index' ] 
   
plc('egg','lem','left')
  }catch(err){
console.log(err)
}
   return t / dur;
}

Math function runner.zip (224.6 KB)


For those of you wondering why we are using globals. It is because the Math Equations do not have access to the Hype document scope ( hypeDocument ) at run time

3 Likes

btw: postMessage from the function to a listener within hype (within a hypefunction) should also work … to connect and exchange

1 Like

Off topic (@h_classen): I think you mean dispatchEvent, right? Something along the lines of https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Concerning the original question… using a Mutation Observer is still the simplest solution with everything in one spot, in my opinion :wink:

1 Like

did not test, but i guess postMessage will work too :slight_smile: