Login ProductsSalesSupportDownloadsAbout |
Home » Technical Support » Elevate Web Builder Technical Support » Support Forums » Elevate Web Builder General » View Thread |
Messages 1 to 4 of 4 total |
CSS (type) flip transform animations? |
Mon, Sep 28 2015 7:52 AM | Permanent Link |
AK | 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 |
Mon, Sep 28 2015 8:39 AM | Permanent Link |
Matthew Jones | 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 |
Mon, Sep 28 2015 9:37 AM | Permanent Link |
AK | 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 |
Mon, Sep 28 2015 10:21 AM | Permanent Link |
Tim Young [Elevate Software] Elevate Software, Inc. timyoung@elevatesoft.com | 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 |
This web page was last updated on Wednesday, April 24, 2024 at 11:07 AM | Privacy PolicySite Map © 2024 Elevate Software, Inc. All Rights Reserved Questions or comments ? E-mail us at info@elevatesoft.com |