'setElementProperty' and classes in two layouts

Using JavaScript with Hype
1

Hello everybody,
I want to simplify my daily work and change from ID-based working to class-based. Please have a look at http://dpa-webgrafik.s3.amazonaws.com/test/classesTest/classesTest.html

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?

Thanks in advance, KalleclassesTest.zip (38.1 KB)

2

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.

2 Likes
3

Wow! Works! And you made me happy :slight_smile: Thanks a lot!

1 Like
4

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.

Example code:

hypeDocument.setElementProperty(element, 'opacity', .6);
element.style.opacity = .2;

window.setTimeout(function () {
    hypeDocument.setElementProperty(element, 'opacity', 1.0, 4.0, 'linear');
}, 2000);

The resulting animation after the 2s timeout would immediately jump from .2 to .6 because that was the value Hype knows about, and then animate over 4s to 1.0.

It'd be great for Hype to use the stored CSS value, but:

  • this would require parsing CSS. Some values like opacity are easy, but others are much more complex and this would add a lot of weight to the runtime
  • Performance would be pretty bad because a) we have to read from the browser's internal data instead of just referencing a lightweight JS object and b) the parsing would take more time too

So for the foreseeable future, if you intend to use Hype to animate a property, you pretty much need to use the setElementProperty() API to make sure the Hype runtime knows about the changes.

1 Like