Here JS newbie.
I'm getting to grips with JS by customizing a (working) script published here some time ago. When writing:
hypeDocument.setElementProperty(boxCover, 'rotateZ', 90.0, 0.6, 'easeinout' );
that works well, but changing 'rotateZ' to
'rotateX' or 'rotateY' - nothing seems to happen.
Am I missing something in syntax or..., any thoughts?
definitely "or" ...
The API only works with "rotateZ" at the moment. Look at the info when using the API Methods to make sure you can use a specific value.
Thank you @DBear for alerting me, and now I see that on in-built documentation.
Yes, because if rotateX and rotateY would be in there you could do what you intended.
You would have to use Vanilla JS on it's own to manipulate elements that you can't using the Hype API. You cannot "mix" the two. In so far as you cannot blend them together.
If you want to set rotateX of an element then you can use
rect.style.transform = "rotateX(angle)"; // angle is 45deg / 90deg, etc;
A solution for now would be to use a relative timeline and set the properties as demanded and the run the timeline instead of the setProperty in the original post. This obviously is limited to fixed values that have been set in Hype before exporting.
Another approach is the use of CSS animation (look that up) through adding the animation class dynamical when needed. Also sort of fixed as the CSS rules are mostly also written in advance.
Last resort use a third party library like TweenLite (look that up) to be fully dynamic. The shame in that is that we need another engine even though potentially we got one fully capable under the hood.