Search
Star
Feedback
Setup for Free
© 2026 Hedgehog Software, LLC
Twitter
GitHub
Discord
System
Light
Dark
More
Communities
Docs
About
Terms
Privacy
Animating `aspect-ratio` property - Kevin Powell - Community
KP-C
Kevin Powell - Community
•
3y ago
•
8 replies
Suggon
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
translate
and
"Clip
" sets the
aspect-ratio
aspect-ratio
of
card__hero
card__hero
image to
2/3
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
aspect-ratio
possible to achieve with pure CSS
?
CodePen
Suggon
Hero Card
Testing
aspect-ratio
aspect-ratio
interpolation
.
.
.
Kevin Powell - Community
Join
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263
Members
View on Discord
Resources
ModelContextProtocol
ModelContextProtocol
MCP Server
Recent Announcements
Similar Threads
Was this page helpful?
Yes
No
Similar Threads
Aspect ratio
KP-C
Kevin Powell - Community / front-end
4y ago
aspect-ratio working cases
KP-C
Kevin Powell - Community / front-end
3y ago
flex-grow - Maintain aspect ratio
KP-C
Kevin Powell - Community / front-end
4y ago