Match and track the position of two elements

Hi. I’ve just begun to learn Hype and in this test scene (attached) I’d like the blue ellipse to oscillate vertically in sync with the ‘top’ position of the pink ellipse as it animates in a circle.

I’ve set up a function to do this but it clearly needs something more than what I’ve placed there so far. i.e. some sort of ability to continuously evaluate the ‘top’ position of the pink ellipse and apply this to the ‘top’ position of the blue ellipse. (my apologies for the likely simplicity of what I’m asking - appreciate your understanding)
position tracking test.hype.zip (12.7 KB)

Hi Peter,
try “setIntervall”.

Best regards, Kalle

position tracking test.hype.zip (15.9 KB)

1 Like

Hi Peter!

Is there a reason why You did not use the timeline that You have already set up for the “Orbiting” (pink) ellipse - for the oscillating blue ellipse? Attached is a demo project…

position tracking test - JHSv1.hype.zip (14.4 KB)

1 Like

Thank you Kalle. Appreciate this. I’ve learned something here. Pete

Thank you Jim. This is simpler and I have recently been gaining experience with making timeline animations. I do have a more complex animation in production that has multiple timeline animations but I was noticing some ‘drift’ over time. This is probably due to some of the customised easing in and out curves I have produced introducing small variations.
So - I was thinking that I could try to lock-down some of the timing by linking the motion of one object to that of another via javascript. I don’t have production experience in knowing how this will pan out …so will see what happens.

1 Like

“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