ScrollTrigger + Scale not working as expected

[Shane Yokota]

Hello,

Im hoping to get some help with animation using scrollTrigger then move x and y + scale.

I am trying to make the following animation (reading this after viewing codepen might make more sense):
- once the green background element hits the top of the viewport (image should be fully centered when this happens)
- Then as we scroll a set amount (currently 1700), i want it so that the icon (in the codepen it is a plus) is fully centered and covering the screen virtically (I also want this to work dynamically with different screen ratio). Imagine if the image + icon were equivalent to a screenshot of a chrome tab with a chrome extension, and we are trying to zoom into the chrome extension as we scroll.

I am currently struggling to get this to work... The x axis (x movement) and scaling seems to work perfect, but the y axis (y movement) and scaling seems to be off...

If anyone could point me to the right track or help me to get this work, i would really appreciate that.

For reference, Ive attached what I am thinking of.
Initial screen (right as the scrollTrigger starts):
Final screen (right as scrollTrigger ends). Blue/purple box is the imaginary screen, and icon fills up the height of the screen fully.

Codepen:

See the Pen MYWJdOP by Shintaro-Yokota (@Shintaro-Yokota) on CodePen.

[mvaneijgen]

I would just use scale and the transformOrigin property, currently I've created some hard coded values that seem correct, but if you know the location of the element compared to the container it is in you can of course do some math to get the exact location. Then also if you know the current screen and you know what size you want the icon element to be you can again do some math to get the scale factor. 

 

I've disabled ScrollTrigger for now and add GSDevTools (a premium plugin you can use for free on places like Codepen!) to help focus on the animation you want to happen. I've also modified your CSS to the container (image) has a height (see yellow border).  

 

Hope it helps and happy tweening! 

 

See the Pen ByaWQpW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

 

PS for responsiveness take a look at https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ and using https://gsap.com/docs/v3/GSAP/Tween/#function-based-values which get recalculated on ScrollTrigger.refresh() which happens on browser resize for example.