Hype Group Error

in hype 4, i have group with “Rotation Y = 65” and i have 2 image. if i group 2 image with the group latest rotation Y, the position of group rotation has change.


Any solution?

transformation origin of rotated element is relies on the parent element.
whenever you change its bounds rotation of the childelement willl change …

Interesting read on nesting 3D transformations in general can be found here:

2 Likes

There is a big show stopper in Hype as the element aren’t structured on export/preview like you see them in the IDE. Every element/group is always rendered into a container/wrapper-div the size of the stage. So you can’t rely on modes of direct CSS property inherence. This is too bad and was in my opinion the reason why mix-blend-modes wasn’t implemented, yet. Because without a little JS help to work around this “container-issue” it can’t work. Same goes here for 3D. Hype only applies the perspective and transforms on the contained element and not on it’s parent. With CSS there is no native parent selector so we are back to JS to fix this. But in case of 3D it’s even more daring as we would need a “3D render context” to engulf the children to do proper 3D clipping. This isn’t possible as Hype always wraps everything in parent containers without transformations.

Here is a read on how you would do it normally. In Hype you could be putting stuff into innerHTML (little pencil icon) but then your missing out on the IDE for animation timelines etc.

2 Likes

3D in Hype uses perspective. The perspective is based on the parent group; if you were to make the parent group the same size as the scene then the perspective would be identical for the object not in the group.

The Hype in-app scene editor uses containers just as the export does. I’m not exactly sure what you’re referring to.

The entire point of the containers was for 3D support, to help ensure consistent perspective and prevent layer occlusion. But as a developer’s note, 3D browser support is a) not used as much as we expected when making v1.0 and b) much buggier in browsers than expected. Also the container system is harder to work with than should be, and I do regret the decision. I am hoping to remove it in the future in a way that will minimize breakage as much as possible.

2 Likes

Sorry, meant that the structure suggested in the IDE is direct but the export contains extra wrappers …

Please do … :+1: