{"id":256188,"date":"2017-06-28T09:27:34","date_gmt":"2017-06-28T16:27:34","guid":{"rendered":"http:\/\/css-tricks.com\/?p=256188"},"modified":"2017-07-06T07:46:49","modified_gmt":"2017-07-06T14:46:49","slug":"move-modal-path","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/move-modal-path\/","title":{"rendered":"Move Modal in on a Path"},"content":{"rendered":"

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. <\/p>\n

They always seem to move in a straight line though. Thanks to the fairly new offset-path<\/code>, they don’t have to!<\/p>\n

<\/p>\n

The offset-path<\/code> 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<\/a>. <\/p>\n

Here’s a super simple path. Literally just two instructions:<\/p>\n

<path d=\"M 250,100 S -300,500 -700,-200\"><\/path><\/code><\/pre>\n
See the Pen A very simple path.<\/a> by Chris Coyier  (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
I can move that path data right over to CSS and animate along a path there:<\/p>\n
See the Pen Animate along path.<\/a> by Chris Coyier  (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
In this case, it was a @keyframe<\/code> animation<\/a> doing the movement, which is essentially just changing the offset-distance<\/code> value.<\/p>\n
The element being animated can be anything! Like, say, a modal ;)<\/p>\n
See the Pen Move Modal In on Path<\/a> by Chris Coyier  (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
In this case, no @keyframes<\/code>, just a transition<\/code> and differnet values of offset-distance<\/code>.<\/p>\n
Careful about that rotation!<\/h3>\n
I’m using offset-rotation: 0deg;<\/code> 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.<\/p>\n
\"\"<\/figure>\n
Fallbacks<\/h3>\n
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<\/code> statement so you could have alternate ways of hiding the modal in the case offset-path<\/code> isn’t supported<\/a>.<\/p>\n
\/* Fallback hide\/show stuff *\/\r\n.modal {\r\n  \r\n}\r\n.modal.hide {\r\n\r\n}\r\n\/* If supported, path-based hiding\/showing *\/\r\n\/* Might as well test the rotation feature, as it's also vital *\/\r\n@supports (offset-rotation: 0deg) {\r\n  .modal {\r\n    offset-rotation: 0deg;\r\n    offset-path: path(\"M 250,100 S -300,500 -700,-200\");\r\n  }\r\n  .modal.hide {\r\n    offset-distance: 100%;\r\n  }\r\n}<\/code><\/pre>\n
Handling Reduced Motion<\/h3>\n
Not eveyone prefers UI’s with lots of movement, and browsers can accomdate that<\/a>. We can yank out the motion like this:<\/p>\n
@media (prefers-reduced-motion) {\r\n  .modal {\r\n    offset-path: none;\r\n  }\r\n}<\/code><\/pre>\n
\"\"<\/figure>\n
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<\/a>). Eventually, it will work though.<\/p>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":288042,"url":"https:\/\/css-tricks.com\/movin-modals-along-a-path\/","url_meta":{"origin":256188,"position":0},"title":"Movin’ Modals Along a Path","date":"June 4, 2019","format":false,"excerpt":"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?\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/moving-modal.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":299869,"url":"https:\/\/css-tricks.com\/motion-paths-past-present-and-future\/","url_meta":{"origin":256188,"position":1},"title":"Motion Paths \u2013 Past, Present and Future","date":"December 6, 2019","format":false,"excerpt":"Cassie Evans has a great intro to motion paths. That is, being able to animate an element along a path. Not just up\/down\/left\/right, but whatever curvy\/wiggly\/weird path you want. It's an interesting subject because there are so many different technologies helping to do it over time. SMIL, JavaScript-powered animation libraries,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/cassie-evans-motion-path.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303113,"url":"https:\/\/css-tricks.com\/get-moving-or-not-with-css-motion-path\/","url_meta":{"origin":256188,"position":2},"title":"Get Moving (or not) with CSS Motion Path","date":"February 3, 2020","format":false,"excerpt":"We just linked up the idea that offset-path can be cleverly used to set type on a path. Don't miss Michelle Barker's experimentation either, with drawing paths or animating text along a path. Dan Wilson has also been following this tech for quite a while and points out why the\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/path.png?fit=1200%2C699&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302008,"url":"https:\/\/css-tricks.com\/set-type-on-a-circle-with-offset-path\/","url_meta":{"origin":256188,"position":3},"title":"Set Type on a Circle… with offset-path","date":"January 28, 2020","format":false,"excerpt":"Here's some legit CSS trickery from yuanchuan. There is this CSS property offset-path. Once upon a time, it was called motion-path and then it was renamed. I sort of rolled my eyes at the time, because the property is so obviously for animating things along a path. But you don't\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/circles-circles-circles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":249797,"url":"https:\/\/css-tricks.com\/basic-shapes-path-never-twain-shall-meet\/","url_meta":{"origin":256188,"position":4},"title":"Basic Shapes & Path… Never the Twain Shall Meet?","date":"February 7, 2017","format":false,"excerpt":"There are some values available in CSS that allow shapes to be drawn. For example, there is a circle() function that is a valid value for a couple of CSS properties. \"Drawn\" might not be the right word, though. It's not like in SVG where you can create a element\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/02\/round-clip-path.png?fit=500%2C420&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":306066,"url":"https:\/\/css-tricks.com\/create-a-responsive-css-motion-path-sure-we-can\/","url_meta":{"origin":256188,"position":5},"title":"Create a Responsive CSS Motion Path? Sure We Can!","date":"April 15, 2020","format":false,"excerpt":"There was a discussion recently on the Animation at Work Slack: how could you make a CSS motion path responsive? What techniques would be work? This got me thinking. A CSS motion path allows us to animate elements along custom user-defined paths. Those paths follow the same structure as SVG\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/responsive-motion-path.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/256188"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=256188"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/256188\/revisions"}],"predecessor-version":[{"id":256568,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/256188\/revisions\/256568"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=256188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=256188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=256188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}