Structure: Two layouts with a copy of the symbol ‘fourCircles’ inside. The left button is supposed to change opacity of all circles down to 20% using ‘.style.opacity …’, the right button does the same but using ‘setElementProperty…’
Both methods work, but in the ‘desktop’ layout I get a couple of error messages using the ‘setElementProperty…’ method - no errors with the ‘iphone’ layout. As soon as I remove the symbol from the ‘iPhone’ Layout or remove the iPhone layout itself, everything works fine without error messages. My question: What am I doing wrong and how can I get rid of the error messages?
Second question: If I click the ‘setElementProperty…’ button, make a reset with ‘.style.opacity …’ and click the ‘setElementProperty…’ button again, the opacity changes to 100 % instantly, without easing. Why is that?
It’s because you’re running code looking for all “circles” in both layouts and because only 1 layout is shown at a time then Hype can’t find the remaining “circles” hence the “errors”. A fix would be to only look for “circles” in current layout. Something like
hypeDocument.layout = element;
On Layout Load and then
var myCircleArr = hypeDocument.layout.getElementsByClassName('circle');
// instead of
var myCircleArr = document.getElementsByClassName('circle');
This could possibly be a bug?? @Jonathan I don’t have an answer for that.
Expected behaviour I think would be whatever approach is setting the opacity then it shouldn’t matter how you reset or vice versa.
This isn’t a “bug,” just how it works. Hype keeps track of its own information on the properties of an element. So if you change a property directly (say via element.style.opacity = something;) then Hype’s animation system won’t know about it and have a stale state.