Set element property inside innerHTML box

Hi!

I need to set the property (opacity, for example) of a specific paragraph inside the innerHTML.

I saw that we can get the element by ID on this topic.

But how to use the hypeDocument.setElementProperty ?

The quick way to do this is to use CSS within the Inner HTML:

But you could also set a class by using <p class="opacityhalf">my text</p>

And then adding that opacity class and property in the <head> of your document.

1 Like

Sorry,

I forget to tell that I want to animate this 0 to 100 opacity like we can do with the setElementProperty method.

There’s a way?

The element would need to be its own element (selectable in the element list) and addressable with a Unique Element ID to use the Hype animation API via JavaScript.

Alternatively, you could use regular CSS + JavaScript to apply a class to the object which sets a fade transition:

This would allow you to set this property alongside any Hype API functions.

1 Like

Ok,

I will separate them in individual elements. Thank you for the help!

I am also running into this. I can’t animate opacity on a node I added via appendChild through hypeDocument.setElementProperty. I get the following…

95HYPE-596.thin.min.js:82 APPLY ERR e=1 : TypeError: Cannot read property 'id' of null

setElementProperty can only work with elements Hype knows about - those which are in your document. Of course there is a long standing request to dynamically create hype elements (and symbols) that I’d love to add in a future release.

To bad as this makes an external tween engine necessary although in theory all the easing etc. and code is already under the hood. On the other hand animate.js is minified only about 14-15 KB.