View Full Version : animating changes to position and size

14 Sep 2010, 11:10 AM
I've got the following code that almost works. What I'm trying to do is to have a container with a card layout, that has two cards in it. I want to

1) Move the position of the container, with animation
2) Resize the container, with animation
3) Flip from card 1 to card2, with animation.

I'm trying to do 1 and 2 with the following code. I've done the flip animation before, so I'm hoping that won't be a problem making it happen with the other 2 running. I've been able to do what I'm describing in pure HTML5/CSS, so I know it can be done, just having trouble getting it to run in Sencha. When I run the below code without adding the animateMove class, it resizes the container and the card inside the container just fine, but when I try to do it with the class, it animates the container, but the card within doesn't scale properly.

Maybe there is a better way to do this with an anim on the object itself, not sure what direction to go from here.

<!DOCTYPE html>
<title>flowright 2</title>

<link rel="stylesheet" href="/sencha94/resources/css/ext-touch.css" type="text/css" />
<script type="text/javascript" src="/sencha94/ext-touch-debug.js"></script>
<script type="text/javascript">

onReady: function() {

var img_url1 = "<img width='100%' height='100%' src='http://images.apple.com/home/images/promo_ipod_nano20100901.jpg'>";
var img_url2 = "<img width='100%' height='100%' src='http://images.apple.com/home/images/promo_ipad_ad20100908.jpg'>";

var pic1 = new Ext.Component({
html: img_url1,
var pic2 = new Ext.Component({
html: img_url2,

var holder = new Ext.Container({
layout: "card",
items: [pic1,pic2],


var mainPanel = new Ext.Panel({
fullscreen: true,
items: [holder],

(function() {




div.animateMove {
-webkit-transition-property: left, top, width, height, opacity, transform;
-webkit-transition-duration: 1.25s;

FYI, here's a link to a page that I setup with HTML5/CSS to get the effect I'm after