Size Interaction with 2 Types of Units?

Design help Animations & Interactions
1

Hello,

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?

Thanks!

Reid

Here is my public share link: https://preview.webflow.com/preview/rp-playground?utm_medium=preview_link&utm_source=designer&utm_content=rp-playground&preview=fdfec2f71dd0cf9d8181f065db72186d&mode=preview

2

Anybody got any insight on this? Thanks!

3

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?

4

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.

5

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.

6

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.

7

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).

:thinking:

8

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.

Thanks.