2d and 3d transformation


2d and 3d transformation.
Just came across :slight_smile:


with SVG also?

Note that while SVG does allow adding a transform attribute to paths (see documentation), I couldn't immediately find a way to set perspective the same way that is done for CSS transforms. As a Vector Shape in Hype is currently a 1:1 correspondence of path to element, the Hype 3D transforms are probably as good. They have a fixed perspective per element/group.

Any plans we can get these CSS Transform Options in Hype?
And as we are here I can followup with: Are we also getting modern CSS-Layout-Options? Meaning CSS-Grid/-Flex.

It could all look like this, taken from Pinegrow. I post these images as a inspiration.




Even the Grid-Designer is a nice approach.

With predefined options:


wouldn't this be against the overall-approach of Hype with absolute positioning and tend to be useful for a websitebuilder instead of an animationapp¿

I have/do and I think others do actually use Hype for both.

These are screenshots of Pinegrow (a website builder) but I would like the possibility to take over positioning on a group level. Meaning on that level the setProperty and animation wouldn't work… but on nested layers it works again. HTML sure does allow this and JavaScript anyway. I tried this is in the stacked symbols templates later renamed Hype Auto Layout and it works fine.

Update: You can already do many grid type layouts using the built-in capabilities.
BuiltInGrid.hype.zip (409,4 KB)

the animationproperties of an element within the Hype are always related to its parent-element ... so yes, this enables some hacks for manual positioning of groups/symbols ...

Interesting tests reveal that we could do some really nice breaks and align without layouts. If you define a 100% width you always must calculate positions based on the initial width as the grid will become stretched.

ScaledGridAppliesToSetElementProperty.hype.zip (33,5 KB)


All of these transforms (rotate, translate, scale, skew, origin change) are currently available in Hype, aside from missing being able to set perspective and stack/reorder transformations.