scrolltriger Center scaling with scrolltrigger

[16067_1494126611]

Hi,

 

I'm working on a website where a large image scales as you scroll. At page load, I want the image to start at 20% scale and be positioned higher on the y-axis so that it's visible in the viewport. While the setup mostly works, I've encountered an issue: when I apply a negative y-position, the scaling no longer happens from the center.

 

However, when I remove the negative y-position, the scaling works correctly from the center, but then the image isn't in the viewport anymore.

See the Pen bGPqoyo by remcovb (@remcovb) on CodePen.

 

Any advice on how to maintain centered scaling while keeping the image in the viewport? Thanks in advance!

 

See the Pen eYwvGqb by remcovb (@remcovb) on CodePen.

[mvaneijgen]

You can set the transformOrigin to a specific point  https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/#transformorigin 

 

But why not just position the element where you want it with CSS, so that you don't have to transform them or you could even look in to the Flip plugin because I think you want the full shape to be at a specific position, so just create the two elements with by adding a class and styling them how you want them to end up and let the Flip plugin figure everything out so that you have the perfect tween. 

 

Side note: you're converting all the number to strings eg y: "-500px", while GSAP is smart and will help you convert them back in to numbers it is much easier to provide them as numbers, eg y: -500, 

 

Hope it helps and happy tweening!