TransformOrigin Not Working Properly

[Shehzad Asif]

Hy There

 

I am getting an odd behavior when I use transform origin for width from left to get revealing effect from left as you can see in the demo. The problem is on my machine it transforming from center, no matter what transform origin I use. It will reveal the image from center. But in codepen, transform origin works okay but its scaling up and down the image. Can any one help me what I am doing wrong.

 

Regards,

Shehzad Asif

See the Pen VwjYEJj by ShehzadAsif (@ShehzadAsif) on CodePen.

[ZachSaucier]

Hey Shehzad. You should set the transform origin beforehand like gsap.set(".img-wrapper", {transformOrigin: "left"});

 

In terms of the scaling, that's just because the image is taking up the available size. There are a lot of ways to fix it including changing removing the width and doing max-width: 60vw; instead.

[Shehzad Asif]

Hy Zach

 

I really appreciate your support and  help. It would be very kind if you can make a demo for  both problems (width revealing effect and parallax image). I followed your guide but could not solve the problem. Can you pls.

 

Regards,

Shehzad Asif