Jump to content


How to make Ken Burns Effect or Peek animation?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:



  • Like 1
Link to comment
Share on other sites

  • 1 year later...

@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?



  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.