Hi Peter,
try “setIntervall”.
Best regards, Kalle
position tracking test.hype.zip (15.9 KB)
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)
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.
"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.
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:
use a mutation observer to check for attribute/style-changes. @MaxZieb provided a extension to simplify … Hype MutationObserver
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)
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)
somehow i knew this’ll happen 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
Can you think of any possibility to avoid the global Mark?
Your the ringmaster..
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.
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…
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
Or just do it like @MarkHunte intended and use a hypeDocument.documenName() Switch in a load callback to hook up the correct global function.
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