Attach event to hypeDocument.setElementProperty()

Using JavaScript with Hype
1

I’ve added a mouse click event to a button and have the following code:

var grnRect = hypeDocument.getElementById("greenRect");
hypeDocument.setElementProperty(grnRect, 'rotateZ', 360, 10.0, 'easeinout');

The rectangle I have will take 10 seconds to rotate 360 degress and it works perfect but I’d like to attach an event to be notified when it’s done rotating or when anything I put into propertyName has completed on optionalDuration.

The optionalDuration can be any value as well.

2

hypeDocument.setElementProperty(grnRect, 'rotateZ', 360, 10.0, 'easeinout', setTimeout(function(){/*do something*/}, 10000));

2 Likes
3

That works but I just need to make sure that the optionalDuration and the time value I put into setTimeout() match since I just noticed that I put 10 in optionalDuration but put 5000 in setTimeout() and the setTimeout() triggered before optionalDuration stopped animating on the (in my example) ‘rotateZ’.

Again, thanks for your helpful working reply and this Hype3 does rock. :smile:

How do I set this answer to SOLVED so others see this as well.

4

@gabegarza1021, @h_classen

So I just did a bit of research and found MutationObserver

I have only just found this ( although it is vaguely familiar ) so not sure of any pitfalls but may have a lot of potential for detecting and reacting to javascript property changes like this …ect.

This also gives us a sort of keep in sync.

I added this to the on scene load.

 var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
     
   if ( Math.floor(hypeDocument.getElementProperty(mutationRecord.target, 'rotateZ' )) == 360 ){
    var textLog = hypeDocument.getElementById('textLog').innerHTML =  "Finished Rotating";
    
    }
        
    });    
});

var target = hypeDocument.getElementById("greenRect");
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

This listens to changes to attributes, in this case I stated the style of the target.

I could not find a way of get the changed value from the observer but then realise I did not need to since the observer will fire it’s call back on each minute change. So I just check the property value in that.

You can use this to get each change. for example we could detect when the rotation starts, in the middle and finished.

In the call back we could do something like this:

 if ( hypeDocument.getElementProperty(mutationRecord.target, 'rotateZ' ) == 1 ){
    var textLog = hypeDocument.getElementById('textLog').innerHTML =  "Starting Rotating";
    return;
    }
     if ( Math.floor(hypeDocument.getElementProperty(mutationRecord.target, 'rotateZ' )) ==180 ){
    var textLog = hypeDocument.getElementById('textLog').innerHTML =  "Half way there";
    return;
    }
    
    if ( hypeDocument.getElementProperty(mutationRecord.target, 'rotateZ' ) == 360 ){
    var textLog = hypeDocument.getElementById('textLog').innerHTML =  "Finished Rotating";
    return;
    }

detectJavascriptStyleChange.hype.zip (14.4 KB)

2 Likes
5

I looked at the attached file and my only question is, where did rotate() get attached?
I see addMutationObserver() got attached to the load scenc event, but where did rotate() get attached too?

6

a Main Timeline Action calls the rotate().

But it’s just an example. I do not know how you will call your function to set the properties …

7

I understand that, but I didn’t see where it was being set but now I see it after you mentioned it.

In the meantime I already setup a button to click on to activate the rotate and I see how addMutationObserver() works and works well too.

For my project the first reply works great but your example works great but for my current Hype3 project I just needed something simple since I’m only going to rotate 2 items and really, just need to track one rotate.

But I can see using the addMutationObserver() for another project I have in mind.

Thanks for your working example as well.

Great community here. :smile:

2 Likes