Have you seen those fancy interactions where a modal window flys down from the top of the page? Maybe it slides in from the side while it fades up to full opacity? Maybe it falls in from above and goes from blurry to focused? Kinda cool, if it fits the vibe of your website.
They always seem to move in a straight line though. Thanks to the fairly new offset-path
, they don’t have to!
The offset-path
property in CSS exists so that you can place an element in some position along a path. Like, the same path syntax we’re used to from SVG.
Here’s a super simple path. Literally just two instructions:
<path d="M 250,100 S -300,500 -700,-200"></path>
See the Pen A very simple path. by Chris Coyier (@chriscoyier) on CodePen.
I can move that path data right over to CSS and animate along a path there:
See the Pen Animate along path. by Chris Coyier (@chriscoyier) on CodePen.
In this case, it was a @keyframe
animation doing the movement, which is essentially just changing the offset-distance
value.
The element being animated can be anything! Like, say, a modal ;)
See the Pen Move Modal In on Path by Chris Coyier (@chriscoyier) on CodePen.
In this case, no @keyframes
, just a transition
and differnet values of offset-distance
.
Careful about that rotation!
I’m using offset-rotation: 0deg;
here, because if I didn’t, the modal would twist to orient itself along the path. That’s very cool that that is possible, but in this case it’s awkward.

Fallbacks
This kind of thing is easily an enhancement. In the case here, we’re also fading out the opacity and scale, so a fallback is automatically handled. You could also wrap this stuff in a @supports
statement so you could have alternate ways of hiding the modal in the case offset-path
isn’t supported.
/* Fallback hide/show stuff */
.modal {
}
.modal.hide {
}
/* If supported, path-based hiding/showing */
/* Might as well test the rotation feature, as it's also vital */
@supports (offset-rotation: 0deg) {
.modal {
offset-rotation: 0deg;
offset-path: path("M 250,100 S -300,500 -700,-200");
}
.modal.hide {
offset-distance: 100%;
}
}
Handling Reduced Motion
Not eveyone prefers UI’s with lots of movement, and browsers can accomdate that. We can yank out the motion like this:
@media (prefers-reduced-motion) {
.modal {
offset-path: none;
}
}

I could swear that media query was working a week or two ago, but right now I can’t get it to actually work in any browser I tried (while toggling the setting at the OS level). Eventually, it will work though.
Like the other fallback, make sure to provide an alternate way for the modal to hide itself. I’m also not entirely sure what the best practice is here. Perhaps if you’re designing a “reduced motion” experience on purpose, you’d opt for no movement at all. Just a display block/none change.
Cool trick! But I’m torn on this – it’s an awesome user experience for a certain subset of users but I’m cringing thinking about the accessibility issues this might have. Modals are already challenging from an accessibility point of view.
I wonder what you’re thinking about specifically here. Does the aesthetics of how a modal is shown/hidden affect accessibility other than the motion concerns I mentioned?
yea modals basically suck, inline content and full page experiences are way better. I actually think that adding animation increases the experience because we see where the object is coming from, and its presence becomes more obvious, and feels more humanist. that said it would need to be a lot quicker, and I feel like animating the opacity would help
@Chris – I was thinking of users with vestibular disorders or other issues where movement and opacity changes can be problematic. But as you noted in your post this can be mitigated via media queries (assuming the browser supports it).
the timing and easing on that modal animation makes me really uncomfortable. great idea tho
@Josh you mean the timing and easing on the animated images right? Everything is kosher when ran through the codepen.io examples. I’ve just started using bs modals, I’ve been using my own method when I need inforgraphic div’s. Definitely going to play with this some.
Graztie good sir
Hi Chris,
Demo works with chrome only.
Any info about (future) browser support?
I wonder, could this be used to implement a Medium-style lightbox? https://terrymun.github.io/Fluidbox/demo/index.html