How to force an element to scale from the center instead of top left of the element

[LilWebbie]

Hi:

 

I am using the superscrollorama scale effect with another jquery script called curtain.js and for some reason the animations are rendering from the top left of the element instead of the defualt center of the element. I am not sure why this is occuring but is there some way to define it within the tween with a parameter like transformOrigin that can be used to define where the animation should originate from.

 

Any advice is greatly appreciated!

Thanks!

[Carl]

Hi,

 

I moved this topic to the JS forum.

 

Naturally objects will transform around center so its odd that something is interfering with that.

Yes the css plugin allows for you to define a transformOrigin property. Go here:

http://www.greensock.com/get-started-js/#css

 

and scroll down just a bit, you'll see the transformOrigin bullet.

 

I have to admit that I am not terribly familiar with the inner workings of superscrollorama or curtain.js

 

John Polacek the creator of superscollorama helps out in here quite a bit. He may have some insight for you. I'll drop him a note.

 

-c

[John Polacek]

Tweening is just transitioning between one css state and another. If you set the css to the first transform state without any tweening, you can see that it is positioned in the top left. Let's fix that. First set the parent element text-align propert to center to horizontally align the image inside.

 

#orb1 {text-align:center;}

 

Next tween the margin-top property of the element to keep it in the center.

 

controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), 6, {css:{marginTop:'50px', opacity:0, width:20, height:20}, immediateRender:true, ease:Quad.easeInOut}, {css:{marginTop:'0', opacity:1, width:290, height:290}, ease:Quad.easeInOut}));

 

And that should do it