Ok…so I’ve seen in Angular JS how much fun it is to “flip” over a palette and see something different “on the other side”. I figured it could be done in XOJO and I’ve had mixed results. Flipping a palette over is easy…but seeing all the same controls “backwards” is not what I have in mind. I imagine something like a baseball card…and I want to flip over the picture to see player stats on the back. Seems like a fundamental thing to want to do. I figured I would flip a palette 90 degrees…then update the controls on the palette (using visible properties), then flip it the other 90 degrees. I could place two full size container controls on the palette and just hide/unhide the appropriate container. Changing the appearance of the control during an animation seems to be the problem. Seems like…it doesn’t do that. Considered trying a timer. set to 50% of animation duration. I just think it’s a matter of server versus client side. maybe this is super easy…maybe it’s impossible (or highly impractical) with XOJO at the moment. Go ahead… tell me how blind I am to the easy solution if you have one. Or dazzle us all if it’s a tough one 
Maybe this is so obvious it doesn’t deserve an answer…or maybe I really did stump the forum base. I’ve tried a couple of things. I maybe able to do the job with a timer as I sort of anticipated. It’s a bit of a kludge…seeing as a decent flip transition takes place in .5 seconds…so my timer needs to intervene at .25 seconds. The exact “timing” of the transition is probably going to be rather unreliable. Make my control appear to stall out during tradition. I took a look at how this is implemented by CSS. Looks like you define two identically assigned controls. You place ne on top the other…you hide one and “pre-flip” it 180 degrees. Then the two “faces” are back to back etc. I’m trying to follow that model. I’m considering I could add the CSS to my project…but then I’ll probably lose my XOJO events on the JQuery “palette” unless I get a lot smarter integrating JQuery and XOJO.
Seemed like a nice little problem to solve, and occurred to me that you needed to use WebAnimator.AddKeyFrame to split the animation into two phases, flip front by 90 degrees, then flip (already half negative flipped) back by 90 degrees.
I’ve just whipped a little test project for you, hope it helps.
https://dl.dropboxusercontent.com/u/6199282/WebFlipTest.zip
If the half flipped front or back get in the way of interacting with the controls on the exposed back or front respectively, might help to use WebAnimator.AnimationComplete event to make half flipped control invisible and/or disabled and re-enable it at beginning of Flip method.
Have fun, and let me know how it works out for you!
Very nice. You managed to pull it off quite nicely…and without a timer to intervene…which makes the transition very smooth.
I had considered flipping a control only 90 degrees leaving it on “edge” (for all purposes invisible). My problem was getting the keyframes where they needed to be. I thought I could flip a control 90 degrees with a keyframe…then…update the container…and then flip it the last 90 degrees. Unfortunately… the animation doesn’t start until the until the click event completes and releases control back to the client. When I click the transition button…an “event” fires that is handled by the server…the server sets-up the animation…and then updates the control visibility…and then completes the event…which returns control back to the client which does the animation. The container update did not occur amid the transition…it happens prior to the transition. The only way I found to beat it…was with a timer… to do part one of the flip and then wait for the timer to fire to update the control…and then “resume” the animation with part2. It wasn’t a very clean transition. I couldn’t use “events” to hide/unhide elements during (at the midpoint) of the animation without server interruption (via a timer). Your method… by flipping each side only 90 degrees with one side “pre-flipped” you let the animation take care of the hide/unhide. Kudos to you. I am impressed. Thank you for sharing.
You’re most welcome, I hope you find it useful, it was fun to put together.