2d and 3d transformation

https://rematrix.now.sh/

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

4 Likes

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.

Transforms:
css-transform

Grid:
css-grid
css-grid-item

Flex:
css-flex
css-flex-child

Even the Grid-Designer is a nice approach.

With predefined options:
pre-defined-options

2 Likes

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)

2 Likes

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.