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?

(Hans-Gerd Claßen) #2

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

(Jonathan Deutsch) #3

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.



Hype project: (14.1 KB)

More info on transformOrigin:

Animation at bottom of this post.

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.


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


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

(Dennis van Leeuwen) #7

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

(Pete) #8

Whats that?

(Dennis van Leeuwen) #9

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

(Pete) #10

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