jQuery Animation Effects

[User7]

Was wondering if there is a "clip" plugin similar to jQuery "clip" effect that can be used on alpha animation.

http://api.jqueryui.com/clip-effect/

 

Need it for horizontal clip. Thought about using scaleX, however, how do you shift center point so clipping starts not from the center but from the left.

 

Thanks!

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

In order to change the transformation origin you can set the transformOrigin property in the instance's config object, like this:

TweenLite.to(element, time, {scaleX:0, transformOrigin:"0% 50%"});

transformOrigin modifies the element's transform-origin property (pretty obvious huh ), basically changing it's fix point for the transform property. By default is the center of the element (50% 50%). The first value corresponds to the X axis and the second value is the point in Y axis. Also you can supply a third value, that states the transform point in the Z axis, but in order to emulate jQuery's UI effect you don't need it.

 

I set up a simple codepen so you can see it:

 

See the Pen aHJei by rhernando (@rhernando) on CodePen.

 

Feel free to fork and adapt it to your scenario.

 

Rodrigo.

[Carl]

Perhaps animating the css clip property will help

http://codepen.io/GreenSock/pen/KmLjr

[User7]

Got it to work. Thank you everyone for your help!