Set a degree rotation, then animate to a different rotation

Using JavaScript with Hype
1

Hi folks,

Thanks for your previous help, but despite scouring these forums and docs, I can’t figure out how to use Javascript to apply the rotation animation I want.

I start off with an element with InnerHTML with an SVG in. I am copying this InnerHTML to create clones of the SVG (Which is a compass arrow).

I want each of these arrows to be randomly rotated before the animation begins. I want the arrows to all realign to a straight direction (0 degrees) as they move up the stage.

I can successfully achieve most of these steps, but whenever I apply the initial rotation, it is always overwritten by the following animation rotation.

Here is my script so far—and apologies, my javascript is probably not the greatest—it’s been a while.

var arrowLoopCount = 5;
var arrowId = 1;
var leftLocation = 100;
var alphaArrow = hypeDocument.getElementById("alpha");
for (i = 0; i < arrowLoopCount; i++) {
	var degreeDirection = Math.floor((Math.random() * 2));
	if (degreeDirection == 0) {
		var degreeRotation = Math.floor(Math.random() * 360) + 1;
	}
	else {
		var degreeRotation = Math.floor(Math.random() * -360) + 1;
	}
	arrow = hypeDocument.getElementById("arrow" + [i]);
	arrow.innerHTML = alphaArrow.innerHTML;
	arrow.style.left = leftLocation.toString() +'px';
	leftLocation = leftLocation + 100;
	hypeDocument.setElementProperty(arrow, 'rotateZ', degreeRotation);
	arrow.style.transition = "transform 7s";
	arrow.style.transform = "translateX(100px) translateY(100px) rotate(0deg)";

Many thanks, any help greatly appreciated,

Stephen

2

It might be easier to give accurate advice if I could see a zip of your .hype document, but hopefully I can provide some tips. In general you’re on the right track, but there are issues with these lines of code:

hypeDocument.setElementProperty(arrow, 'rotateZ', degreeRotation);
arrow.style.transition = "transform 7s";
arrow.style.transform = "translateX(100px) translateY(100px) rotate(0deg)";

In the first line, you’re using the hype setElementProperty API which is good and will make the Hype runtime aware of the changes so it can later successfully animate. However the next two lines are using the direct CSS transformation/transition APIs, which means that the Hype runtime won’t be aware of what is going on. Instead, you can use the same setElementProperty call with extra arguments to add a Hype-compatible transition animation. It would look like:

hypeDocument.setElementProperty(arrow, 'rotateZ', degreeRotation);
hypeDocument.setElementProperty(arrow, 'rotateZ', 0 /* value */, 7 /* duration */, 'easeinout' /* optional timing function */);

There might be other issues in regards to how timelines within Hype are called, but I’d need to see the document to know if that is the case and offer suggestions. You may also need to use relative timelines depending on your needs.

2 Likes
3

Many thanks for taking the time to write all this out Jonathan. This worked perfectly and even respected the existing settings I had for each arrow now that it is part of hypes internal API, such as opacity changes, which weren’t in the javascript settings (I might script these also). Awesome!

1 Like