Cubic form on mobile example

[Vic]

Hi Jack,

For years I looked at this in .as and never dove in, but now in just signed up corporate just so I can use .js version (not interested in flash no more).

 

I need help w/ cubic css3 transform, possibly some consulting for the ticket. When I say cubic, here is an example:

<click cubic>

http://moobilejs.com/demos/latest/moobile-simulator/index.html

He does this w/ very complex css3 and I can't follow, and he does it for the entire page and I just need the form to 'cubic'. Here is his css3:

https://github.com/jpdery/moobile-core/tree/master/Styles

 

Can I get some help to get a simple version that just does a 'cubic' of a form?

So I can go next, next, next for 15 steps on mobile.

 

thx,

Vic

[GreenSock]

First of all, welcome to the club Vic. Great to have you on board.

 

Unfortunately, there isn't really a built-in easy way to slap on a cubic transition like that, especially one that works well across all the major browsers. I noticed that your link only worked in 2 of them (Firefox was dead, as was IE). We may create a plugin for that sort of effect sometime in the future, but at this point this isn't something that exists. You certainly can use the JS tweening engine to tween just about any property values, but you'd need to devise a system (or find a canned one) that provides the 3D functionality and maps things correctly in space so that the surfaces appear to move together. I really wish I had a super simple solution for you. And if you joined Club GreenSock just because you thought there was a built-in way to accomplish that task, we'd be happy to give you a refund.