image pin perspective

[Sukru]

Hello, I want the perspective to improve as the scroll moves down, and then I want the scroll to continue. In my example, the perspective improves, but the scroll does not have a pin, it moves normally. Can you help me?

 

See the Pen OJrGXLZ by sukruemanet (@sukruemanet) on CodePen.

[mvaneijgen]

I would set the will-change via CSS, that way the browser will know what to do with the elements as soon as possible. You're animating your trigger element, that is a no go with ScrollTrigger, so I've changed that to use the figure element (.image), and I've set transform-origin: top center (by default it is the center of the element). Is that what you're looking for?

 

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

[Sukru]

@mvaneijgen Hell, why does it go inside the spacer div? I actually wanted the spacer div to continue when the scroll animation finished

[mvaneijgen]

Because of you CSS I've removed some things and moved CSS around, but due to some other containers CSS it overlaps with the spacer. 

 

See the Pen WNLWMyJ?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen.