Is it possible to set or change the point of rotation (origin point) in a symbol, and other properties, using Javascript?

Using JavaScript with Hype
1

Ex-flash and Actionscript user here trying to understand what is and isn't possible with Hype and Javascript. I've looked at the Javascript API functions and nothing like this seems to be listed.

I'm developing an idea which requires me to be able to dynamically change the 'origin point' or 'centre of rotation' for any specific Symbol in a Hype document using javascript. In Flash I could put symbols within symbols and use Actionsript to dynamically modify some of their properties such as scale, size, rotation, location etc.

Does anyone happen to know if this is even possible dynamically using Javascript?

2

setting transformOrigin is not supported in the API and not animateable.

you can set it by 'normal' js, but HYPE will try try to take control ... so you'lll need to setup a mutationObserver to reassign your value along with attribute-changes.
sthg. like:

var config = { attributes: true };

var observer = new MutationObserver(function (mutations) {
//your Origin:
	yourElement.style.setProperty('transform-origin','50% 50%', 'important');

});

observer.observe(yourElement, config);
3 Likes
3

Thank you. That looks very elegant, I'll let you know how it goes in due course. Much appreciated.