How to make Ken Burns Effect or Peek animation?

[kittichai]

Ken Burns Effect (http://en.wikipedia.org/wiki/Ken_Burns_effect), Peek (As in PowerPoint) and Wipe from bottom or right requires the following property to be animated in harmony:

 

- Scale

- Position

- Clip

 

Somehow, it seems that the transform and clip of the same frame is out of sync. I used to solve this problem in Actionscript version by making TweenMax that only animate scale, then hook its onUpdate to a function which measure the size and move position + recalculate clip in real-time, ensure that these properties are animated in the same rhythm. But, I don't know how to do it in Javascript since, on every frame, Javascript report original image size, not clipped size.

 

So, can I receive the current, real-time value of clip or scale of the image from TweenMax?

[GreenSock]

Yeah, things like this are much more difficult in JS/CSS because all transforms are merged into a single "transform" property that only reports as a matrix() or matrix3d() when you get the calculated style from the browser. However, as long as you're animating those things with GSAP, we can make it much easier for you because we store the individual transform values on a "_gsTransform" property of the element. It's an object that has transform properties like scaleX, scaleY, x, y, rotation (in radians), skewX as well as 3D properties if the browser supports that (like z, rotationX, rotationY, perspective, scaleZ, and zOrigin).

 

So, for example, to get the scaleX you'd do:

var sx = myElement._gsTransform.scaleX;

 

Does that help?

 

P.S. Chris Gannon just posted a helper tool for getting these values: http://chrisgannon.wordpress.com/2013/01/11/greensock-properties-helper-class-for-javascript-and-jquery/

[kittichai]

That might, but I have to make another thing works first. Can you help answer http://forums.greensock.com/topic/7090-why-dont-you-provide-a-real-source-code-for-each-of-your-demo/ ?

I post it in incorrect forum. Thanks for your fast response!

[kittichai]

var sx = myElement._gsTransform.scaleX;										

 

I have try _gsTransform, do you also have this kind of hidden property like this that I can grab "clip" value?

Where should I look in your source code for these property? This is very useful.

[GreenSock]

GSAP only stores the transform properties like that because they're impossible to get any other way accurately, but for all other values you can use the getComputedStyle() method on the window (but old versions of IE need different code). See these links for more details:

http://www.javascriptkit.com/dhtmltutors/dhtmlcascade4.shtml

http://www.quirksmode.org/dom/getstyles.html

[graywithanA]

@kittichai I'm currently about to attempt the Ken Burns effect using Greensock and was wondering if you ever got it working to your satisfaction.  Care to share any code, tips, etc?

 

Thanks!