Can I not animate the origin?


#1

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.


#4

@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.


#5

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


#6

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.