Increase div width on scroll without child img moving/scaling

[Probablybest]

I'm trying to do an image reveal on scroll so that as the user scrolls down the page you can see the full width of the image. However I can't figure out how to get the image to start in the correct position, which would be the full width of the page and centered, and then as the user scrolls more of the image reveals without the image moving position. 

 

I tried to do this with scaleX at first, but then trying not to get a child element to scale wasn't working. So then I've made a basic script which controls the width of a parent div but I need the image not to move and I'm not sure what the best way is to achieve this?

See the Pen poqzPPY by Probablybest (@Probablybest) on CodePen

[mvaneijgen]

A clipPath or that said a mask would be ideal for this. I've quickly created two clip-path's with https://bennettfeely.com/clippy/ one fully filled and the other a smaller square (trapezoid, didn't have time to make it a perfect square). This is the simplest way, but if you want more complex shapes you can look in to a SVG (you could go the route of real masks, but if the background will be just solid colors it is much easier to just place a svg on top the image) 

 

If you want to go the route of an SVG you'll have to create two shapes in your design program, one with the round corners and the other a full rectangle and then use the MorphSVG plugin to morph between the two shapes. Keep in mind that the best thing to do with MorphSVG is have the same amount of points between the two shapes. 

 

Hope it helps and happy tweening! 

 

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