scrollTo method of Ext.scroll.Scroller not finishing animation

[bobHerman]

I've been pretty stumped here, and haven't found anything on the forums to help me out. I've got a scrollable DataView object full of images and when a user clicks on one of the images, I make a call to the scrollTo method of the dataview's getScrollable().getScroller() object (of class Ext.scroll.Scroller) to scroll that image to the center of the screen. This works fine, however I want additional functionality that I can't figure out how to implement properly. When an image is scrolled to the middle, I want to animate the expansion of its left and right css margins to push the other images away. Similarly, when the user clicks on another image, I want to animate the contraction of the current middle image's margins before scrolling to the new image, whose margins will then be expanded. I run into the following problem when trying to achieve this behavior:

I make the following call to scrollTo in my DataView to animate the scrolling of itself.

 var scroller = this.getScrollable().getScroller();
scroller.scrollTo(offsetToScrollTo,0,true);

Much of the time, the scroll will not complete animation. The scroll will only scroll to half of the way and then stop. However, when I wiggle the dataview a bit, it will suddenly jump to where I wanted it to scroll. Furthermore, if I listen to the event scrollend, it seems that when this event is fired, the offset of the scroller is exactly what I want it to be, but the scroller physically does not seem to go to the new offset until I wiggle it a bit with my mouse. I think the animation is being interrupted by my margin animations (achieved w/ CSS transitions btw) and I can't figure out how to solve this. I've tried waiting for the middle image's margins to finish contracting (by listening to webkitTransitionEnd) before attempting to scroll to a new image and the animation still gets interrupted. If I don't animate the call to scrollTo and call it like this instead (leaving out the 3rd parameter to scrollTo):

var scroller = this.getScrollable().getScroller();
scroller.scrollTo(offsetToScrollTo,0);

the scrolling then works fine, but because it isn't animated, it looks very jarring. Does anyone have any idea how I can keep animating my scrolls without having my images' margin expansions and contractions interrupt the scrolling animation?

[bobHerman]

I tried using the setTimeout function to wait for 1 second after the middle image finishes contracting before attempting to scroll. The animation will not be interrupted in this case. This is not such a great solution though, and it would be nice to find a way to know exactly when it is okay to begin scrolling without fear of the scroll's animation being interrupted. If anyone has a better way to solve this problem, I'd really appreciate it!