eclipsesource / eclipsesource/tabris-js

3D Transform Support

Open
#1,075 3 comments 0 reactions 0 assignees View on GitHub
feature
Dominant language
JavaScript
Stars
1.4k
Forks
171
PR merge metrics
No merged PRs in 30d

Description

Hi. is it Posible that tabris widgets can have support this Properties?

- Perspective property 
- Perspective-origin

_Transformation_
- rotationY
- rotationZ
- translationZ for ios 
- scaleZ
- transform-origin

Also would be nice to have support for requestAnimationFrame as mention in #383
The reason is that I wanted to have more options for animations and layout. and if you ever heard of famo.us then you probably know that they used css 3D transforms to do just that. There is a Fork of famous called SamsaraJS, you can check the website at [http://www.samsarajs.org](url) also in the github repo's redme there is a link of a talk that David Valdman gave. 

So the point is that I thought why not use samsara to do layout and animations in tabris. So I try to integrate samsarajs in tabris and it worked, just by swapping the Dom for Tabris Widgets, I made a POC video, this is the link [https://www.youtube.com/watch?v=qAmZccfnF64](url)

The good thing about samsarajs is that you could have complex layouts without deep nesting. In Samsara the nesting is done in JavaScript in what's called the render tree.

The render tree begins with a root called the Context and is built up of nodes with various layout data. The leaves of the tree are Surfaces. Only the leaves of the tree have a visual representation. This representation is modified by the nodes above them, which manifest in the DOM as changes to opacity, size, and transform properties.

samsara also has a UI element to visualizes touch interactions, useful for demo purposes, as I have shown in the POC video

The menu demo code was taken from samsarajs github repo and the code was almost keep the same, just made some adjustments to repalace the rotationZ property, since tabris dont have a rotationZ, also instead of the genrericInput just used a touchInput, and I added and extra node so I can center the surfaces with origin and align because Tabris has no tranform-origin property.

I think if tabris adds more support for some of the most common browser APIs it would help to integrate more libraries that are already built for the DOM.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.