Odd issue when tweening RaphaelJS

[midimid]

I've been loving this library and have been applying it to a pan/zoom project. I ran into a problem recently however and made up a simple JSFiddle to show it:

 

 

http://jsfiddle.net/U2WLP/2/

 

In this project you can click on either of the two boxes, and you can drag to pan the raphael paper after zooming in.

 

As recommended on this forum, I'm using TweenLite to simply tween some numbers (a set of to and from coordinates of x, y, width, and height) and applying them to a setViewBox with TweenLite's onUpdate.

 

The problem I'm having is if you click from one box to the next. i.e. click on the bottom-most box, then click on the one directly above it. What happens is a weird zoom in first - then zoom out during the animation.

 

This appears to only happen when the width/height ratio is drastically different. For instance, when the two objects clicked on have a width-greater-than-height, all looks fine. But when one object has a width greater than height, and the other object has a height greater than width, you see this weird zoom in first, then zoom out.

 

Is there any way around this? Any thoughts?

[Carl]

Hi,

 

I spent some time looking over your code. I regret that I'm not all that familiar with Raphael.js, other than knowing what its for.

 

I verified that TweenLite is generating the expected values by adding a little debug code

 

 

function updateZoom() {
	console.log(animateObj.w, animateObj.h);
R.setViewBox(animateObj.x,animateObj.y,animateObj.w,animateObj.h,false);
}

 

I looked into the setViewBox() method and although you have your 'fit' value set to false, it appears as though raphael is overriding the TweenLite values and resizing your objects to fit into the visible area.

 

I also edited your doMouseUpItem() and bypassed the tween altogether and directly used R.setViewBox() to immediately render the end values like so:

 

 

//Tween From
	animateObj = {x:currentBBox.x,y:currentBBox.y,w:currentBBox.w,h:currentBBox.h,r:ratio};
	console.log("FROM:" + currentBBox.w + " " + currentBBox.h);
	console.log("TO:" + gotoW + " " + gotoH);
	//skip the tween and go right to end result		
	R.setViewBox(gotoX,gotoY,gotoW,gotoH, false);  
	zoomComplete();  
	//Tween To
	//TweenLite.to(animateObj,3,{x:gotoX,y:gotoY,w:gotoW,h:gotoH,onUpdate:updateZoom,onComplete:zoomComplete});

 

the code above rendered exactly the same way that the tween did when it finished.

 

I wish I knew more about raphael. Perhaps you can post a TweenLite-less version in a raphael forum and get better help.

 

-c

[midimid]

Thanks Carl. I have posted about this on the Raphael Google Groups, but without a response yet.

 

Out of curiosity - how does TweenLite handle this when tweening in Actionscript? Is it purely that setViewBox works differently from animating in actionscript? I was playing with the idea of changing x,y vs. w,h properties at different times with delays, etc, but most of those experiments didn't look too good.

 

The only thing I can think of is moving away from setViewBox and back to other methods found in previous versions of Raphael (i.e. transform and translate), but setViewBox is definitely the recommended way to "change" objects in Raphael as of the 2.x, so I'd rather stick with that and just live with the problem for now.

[Carl]

how does TweenLite handle this when tweening in Actionscript? Is it purely that setViewBox works differently from animating in actionscript?

 

 

I don't know really how to answer this. 99% of the time the target of a TweenLite tween in ActionScript is a DisplayObject (MovieClip, Sprite, Button etc). TweenLite has direct access to a number of properties of those objects that are directly tweenable.

 

TweenLite.to(mc, 1, {x:200, scaleX:2});

 

There is no need to call onUpdate functions to change the size or position of an object. In the case of the raphael setViewBox() method, that function isn't directly tweenable so an onUpdate callback needs to act as a middleman and call that function with the new values that are being tweened.

[GreenSock]

Exactly - TweenLite doesn't do any funky voodoo magic behind the scenes for tweening the width/height/x/y/scaleX/scaleY of DisplayObjects in ActionScript. It's pretty straightforward. All it does is figure out the inbetween values and set the property directly. That's it. So as Carl indicated, this sure looks like a Raphael issue (bug?) rather than anything related to the tweening engine.