Hi folks,

Is it possible to get a TPanel or TBasicPanel (or any container component) to do something like this:

Demo:  http://davidwalsh.name/demo/css-flip.php

Article:  http://davidwalsh.name/css-flip

I'm looking for animated transformations driven by CSS, or any alternative in EWB.

Thanks

AK

AK wrote:
> Demo:  http://davidwalsh.name/demo/css-flip.php


Interesting effect, but there is something not quite right about that
in that it too often jumps back and it is visually horrible when it
does. Very jarring. (Chrome, Windows)


> I'm looking for animated transformations driven by CSS, or any
> alternative in EWB.

Not sure on that exact one, but you could probably do nice things with
the animations on position, if you do something like have a pair of
BasicPanels in another BasicPanel, and then slide them from one visible
and one above to one below and one visible (IYSWIM).

EWB1 had a nice animation system that got integrated better into the
UI, but you can still do fancy things. The rotation I'm not sure on
though - key is how does the CSS do it, and how do you get access to
the elements in EQB. A custom component could probably do it.

--

Matthew Jones

Hi Matthew,

Thanks for helping out.  Appreciate it.

> Interesting effect, but there is something not quite right about that
> in that it too often jumps back and it is visually horrible when it
> does. Very jarring. (Chrome, Windows)

??  I'm not sure I understand.  The code executes on the event "onTouchStart" and ends as soon as the mouse leaves the object perimeter.  So, if you move your mouse quickly over and off it, it will attempt to show the tile transition effect but then quickly reset to flat position when mouse leaves the <div>.  I think that's by design.  I am sure the delay can be set too.


>Not sure on that exact one, but you could probably do nice things with
>the animations on position, if you do something like have a pair of
>BasicPanels in another BasicPanel, and then slide them from one visible
>and one above to one below and one visible (IYSWIM).

I think I do.

>EWB1 had a nice animation system that got integrated better into the
>UI, but you can still do fancy things. The rotation I'm not sure on
>though - key is how does the CSS do it, and how do you get access to
>the elements in EQB. A custom component could probably do it.

So, this demo is using native CSS transform and transition operations.  This is directly supported in CSS:
"transform: rotateY(180deg);"

http://www.w3schools.com/css/css3_transitions.asp

Is there any way to hook this type of CSS to TPanel?

Many thanks

AK

AK,

<< Is it possible to get a TPanel or TBasicPanel (or any container component) to do something like this:  >>

Not currently, no.  The issue with using CSS animations is that IE9 doesn't support them:

http://caniuse.com/#feat=css-transitions

That, combined with the fact that I wanted to make sure that one could do custom animations on any property, is why I went with JS-only animations.  However, as things progress and IE9 fades into the distance, I'll be able to move some of the animations to CSS properties instead.

Tim Young
Elevate Software
www.elevatesoft.com