Can I not animate the origin?

I cannot find any animate property that alters the “Transform Origin” properties…either X or Y Offset. But I need this capability.

I am trying to create a cover flow animation, where rectangles enter from the right with a Y offset and rotation, but when they arrive at the center, the Y offset changes from 100% to 0%. Then the rectangle continues to move to the left, the Y rotation angle is fixed to the left side of the rectangle.

If this can only be done with javascript, could someone point me to the right snippet?

you may have each twice with different transformorigin. then swap (hide/show) to the desired …

It is correct that the transform origin is not animatable in Hype. (This is a good feature request, of course!)

Given adding a unique element ID, you could manually set it (or animate it outside the bounds of hype) with code that would look like:

hypeDocument.getElementById("mybox").style["transform-origin"] = "50% 50%";

However Hype does set this value and there’s a good chance it may interfere with Hype’s animations.

@finedesign

Hype project: TransformOrigin_JHSv1.hype.zip (14.1 KB)

More info on transformOrigin: https://www.w3schools.com/jsref/prop_style_transformorigin.asp

Animation at bottom of this post.

Description:
A square (id = “Rect1”) moves along a linear path left to right. At the 1.5 second mark the Timeline triggers the function “transformObject1” which changes the origin from Hype’s initial setting (50% 50%) to (0% 0%) and rotates the square by 45°.

There is a “grid” set behind the square so you can easily see the transform location shift when it occurs. At the 3 second mark it triggers the function “transformObject2” and flips back to (50% 50%) with a rotation of 0°.

While this is going on a circle is orbiting the grid (transform origin: 50% -100%); another animation to test for the possibility of interference.

1 Like

Thanks so much for sharing this! I think I follow your logic and will try it out in an upcoming sprint.

1 Like

Thank you, @jonathan. I have noted this and also posted a feature request.

I also have to cheat the transform origin now with an animation path. Getting the hang of it.



Whats that?

Weird position of an image. I do agree. Some frames the eye ignores, but I see you do not.

:joy: I was just pointing out the obvious, what our eyes see in slow mo or don’t see when in motion.

1 Like