A decade ago, Ryan Jeffords changed my life forever when he introduced me to the concept of four-sided positioning in CSS. Since then, four-sided positioning - along with CSS Flexbox - have become a mainstay of my modal-window content strategy. As much as I love positioning in CSS, I've never felt very comfortable using the
transform property; and, I wasn't sure how something like
transform: scale() would work in conjunction with four-sided positioning in CSS. So, I wanted to give it a quick exploration.
In today's web application landscape, I believe most use of animation is overkill. I think it represents a general lack of empathy on behalf of the designers; and, does little more than slow down user interactions that would otherwise be instantaneous. That said, one place that I do appreciate subtle animation is when bringing a modal window into view.
Since a modal window opens on top of other content, it can be a little jarring, even disorienting; especially if the modal window is "full screen" and completely eclipses the content that the user was just viewing. By animating a modal window into view (just shy of instantaneously), we can foster a more organic understanding of the user interface (UI) layering.
This is where CSS
transform: scale() comes into play. We can use
scale() to "grow" the modal window into view. And, I'm excited to see that this works seamlessly with my use of four-sided positioning. To see this in action, I've put together a demo in which we can toggle the rendering of a modal window that uses both four-sided positioning and a
@keyframes animation containing
As you can see, when the modal window element is added to the DOM, our
@keyframes animation transitions the element from
scale(1). That, along with our four-sided positioning, makes for a pleasant rendering experience:
NOTE: The duration here is absurdly slow for the purposes of the demonstration. In production, this timing should be just shy of instantaneous.
It's great that four-sided positioning and
transform:scale() play so nicely together in CSS. It will make for much easier modal-window authoring. Especially when you throw in CSS Flexbox, which is one of the greatest things since sliced-bread.
Epilogue on Animating Elements Out of View
@keyframes are great because they make many types of entry animations dead simple! However, since the element-in-question needs to be in the DOM in order to animate,
@keyframes don't work seamlessly with exit animations. The goods news is, most things don't need exit animations.
The reason entry animations can be nice is that it gives the user time to construct a mental model of how the elements on the page relate to each other. Removing an element from the page - in response to a user-interaction - does not require the same form of hand-holding. When a user goes to "close" something, that thing can be closed instantaneously - the user already understands what it is they are trying to do; there is no enhanced UX by slowly (and painfully) removing that element from view.
Want to use code from this post? Check out the license.
After posting this, I got to thinking about the
prefers-reduced-motion media query; and, how we might alter the entry-animation of the modal window using that media query:
I outline three different approaches; but, ultimately, I think I prefer one that applies multiple
@keyframes animations to the same element (using progressive enhancement).