[Help on frame 2]

I had the same problem in AS3.

This fixed it-

https://support.sizmek.com/hc/en-us/articles/200719349-Working-with-ActionScript

 

[Masks]

Perfect. Thanks!

[Masks]

Hi,

I am trying to create an animation that requires the use of a mask. Do you have any any examples of using masks that zoom?

 

I used overflow:hidden to achieve a moving mask like effect but I cant seem to figure out how to get it to zoom out to reveal the content. 

 

Thanks,

Jude

[Registration Point]

Hi and welcome to the Greensock forums.

 

It sounds that you're using width and height to change the image size. In that case there's not much to do, the box model specification establishes the top-left corner as the origin point and that can't be changed.

 

The options are use the scale parameter in the constructor, which is a transform property and by default the origin point is the element's center, but you can change it to whatever you want:

//the transform origin establishes the origin point
//considering the top-left corners as 0% and 0%
TweenLite.to(element, time, {scaleX:2, scaleY:2, transformOrigin:"50% 50%"});

//you can also use the scale shorthand to assign the same value to both X and Y
//by default the transform origin is 50% 50%
//the following code has the same effect than the previous
TweenLite.to(element, time, {scale:2})

Although scaling might cause some distortion in the image. To increase the height and width, you also have to tween the element's top and left margin or position, at the same time but usually results are not very smooth:

TweenLite.to(element, time, {height:"+=100", width:"+=100", left:"-=50", top:"-=50"});

Also is always very useful to get a peek at a reduced sample, in order to get a clear idea of what the issue could be, please take a look at this post:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

 

Thanks

scaleX and  scaleY works perfectly.

[Registration Point]

Hi,

I have just started using TweenMax.js and I have an image that i am scaling. Right now the image is scaling from the top left corner. How do i get it to scale from the center?

 

In flash I just set the registration point to the center. How do i do this in js?

 

Thanks