Scale for the frame but do not scale image

[trieuvy]

Hi guys,

 

I'm trying to recreate the scaling effect that Apple is using for their Apple Watch page (https://www.apple.com/watch/), but haven't achieved the desired result yet.

Currently, I'm using scale to shrink the images as I scroll down, it works as expected but the image shrinks along with its container frame. I want only the container frame to shrink while the image maintains its original size, similar to this video (https://streamable.com/n9xj3e).

See the Pen Povwwwj by trieuvy (@trieuvy) on CodePen

[Rodrigo]

Hi,

 

Actually they're using clip-path inset with round:

clip-path: inset(4rem 20% round 1rem 2rem 3rem 4rem);

https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/inset

 

If you inspect with devtools you'll see this:

element.style {
  clip-path: inset(2.87718% round 20.2554px);
}

You should have a look at this thread:

 

Hopefully this helps.

Happy Tweening!