Animating `aspect-ratio` property
(this is a simplified version of my earlier post here)
Pen link: https://codepen.io/Suggon/pen/NWJKZXE
i've designed a two-column image layout with two checkboxes to toggle how the images are laid out. "Merge" merges the two images using
translate and "Clip" sets the aspect-ratio of card__hero image to 2/3.
Merging is nice and fine and animates smoothly, but animating the clipping is turning out to be trickier than expected. is animating aspect-ratio possible to achieve with pure CSS?4 Replies
it's true that animating
aspect-ratio wants both starting and ending states well-defined within the styles. but even if so, i'd intuitively expect the browser to simply take that initial point from its own user-agent styles. i'm not completely sure why the browser is failing to recognize it as a valid initial state
Did you delete this post and re-created it? I was just about reply earlier 😄
some properties need to have an initial value other than
auto, which is the default in most cases. If you add aspect-ratio: 1/2 (or whatever the initial value for your initial images is), it should work.yeah mb, accidentally deleted the post and had to begin writing everything from scratch xD
thing is, the ratio of the image in left can vary (specifically in horizontal axis) so any value that doesn't match the original resolution makes an undesirable upscale or downscale.
and i'm still not clear on why it isn't possible, given the image's
width and height attributes make the browser UA-style define an extrinsic aspect-ratio 🤔Some properties have different ways of being animated than others, and some simply can't. You may try to specify the width and height of the image elment as html attributes, see if that helps.
But, otherwise, you'll have to use some JavaScript to calculate this upfront.