Size Interaction with 2 Types of Units?


I’m trying to make a scrolling interaction that changes an image from 100vw wide and 100vh tall to 500px wide and set to auto for height.

However when I try nothing happens…

It only works when the units are the same, i.e. all px or all vw/vh.

Is there any workaround for this?



Here is my public share link:

Anybody got any insight on this? Thanks!

Hi Reid,

looks like there is a problem with using different units (vh, auto, px) for the same element. Change them to - say - all wh/vw and it should work much better.

Edit: Should have read the whole text, sorry. What are you trying to achieve? Why do you need to mix units?

Thanks Chris!

I’d essentially like a full screen image to shrink to a specific width (such as the main content max-width) when scrolling down.

I don’t want my main content to be set as vw for obvious reasons. Ideally it would be 1200px or something like that.

Hm, not sure how to solve it.

Have you tried scale instead of size?

Probably not ideal but at least you’d have the desired final size.

I just tried that and it appears to have the same result.

I’m not able to input a px amount with scale, just something unitless like 0.5.

Thanks for helping, I’m stumped! I’ll have to think more about it.

My idea with going for scale was:

  • Set it to something around 1.8 / 2 to cover the whole screen
  • Choose 1 / 1 scale for the 100% keyframe to match the container size (when you set the container to 1200px, the 1 / 1 scale should scale your image to that size).


Interesting idea!

I tried it and it sort of works. Unfortunately the cropping of the image gets out of whack.

Also, I imagine there being problems depending on the device/viewport size.

This may be a step in the right direction though, I’ll try some more things.