I’m trying to make an scene where if I click a button the transform-origin of the middle square is changed with javascript but it doesn’t seem to work.
Is there a way to make this work? I attached my hype project.
dynamictransform-origin.hype.zip (11.3 KB)
Your Code is right and it does apply the new Origin, but it’s overwritten by hype while animating … it’s simply not a feature of hype and interferes.
in this case you’d need to script the whole animation yourself.
How would I script such an animation manually in Hype? Or is there a way to remove the overwriting of transform-origin perhaps in the exported hype.js file?
i'd guess no ... may be continously setting your origin, but that sounds odd.
within hype you can use every webstandard css, js to reach your goal. for easyness you can also include a libray that fits your needs like : https://animejs.com/
Hype will set the transform origin whenever transform-related changes are made; in effect this is constantly if you are rotating. You could probably override it by instead of setting the element’s style tag (which is what Hype will overwrite), modify some CSS in the document and use the !important directive to give it priority.
(note: this will definitely break physics, if you are using that)