Modals always be just appearin’. You might see one once in a while that slides in from one of the edges, or uses some kind of scale/opacity thing to appear from “above” or “below.” But we can get weirder than that. Why not have them come in on an offset-path?
Just a swoopy arc is kinda fun.
See the Pen
Move Modal In on Path by Chris Coyier (@chriscoyier)
on CodePen.
Or we could Mary Poppins it and have it come floating in from afar.
See the Pen
Move Modal In on Path: Mary Poppins Edition by Chris Coyier (@chriscoyier)
on CodePen.
Or get straight up wiggly woggly.
See the Pen
Move Modal In on Path: Wackadoo by Chris Coyier (@chriscoyier)
on CodePen.
That’s all. I figured you were here for the CSS tricks, anyway. ;)
These only work in Chrome. Sigh.
Hmm, yeah they’re using offset-path.
I guess you could jimmy something up with transforms?
Really cool stuff, but I wish you would’ve mentioned browser compatibility here aswell.
The heart of this is offset-path, here’s the Almanac including browser support:
Doesn’t work at all for me.
macOS Mojave 10.14.4
Chrome 75.0.3770.80
Firefox 67.0.1
Y tho?
offset-pathis cool, but the application here is less than desirable.