{"id":275322,"date":"2018-08-24T07:02:22","date_gmt":"2018-08-24T14:02:22","guid":{"rendered":"http:\/\/css-tricks.com\/?p=275322"},"modified":"2018-08-24T07:02:22","modified_gmt":"2018-08-24T14:02:22","slug":"using-css-clip-path-to-create-interactive-effects-part-ii","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/using-css-clip-path-to-create-interactive-effects-part-ii\/","title":{"rendered":"Using CSS Clip Path to Create Interactive Effects, Part II"},"content":{"rendered":"

This is a follow up to my previous post<\/a> looking into clip paths. Last time around, we dug into the fundamentals of clipping and how to get started. We looked at some ideas to exemplify what we can do with clipping. We\u2019re going to take things a step further in this post and look at different examples, discuss alternative techniques, and consider how to approach our work to be cross-browser compatible.<\/p>\n

<\/p>\n

One of the biggest drawbacks of CSS clipping, at the time of writing, is browser support. Not having 100% browser coverage means different experiences for viewers in different browsers. We, as developers, can\u2019t control what browsers support \u2014 browser vendors are the ones who implement the spec and different vendors will have different agendas.<\/p>\n

One thing we can do to overcome inconsistencies is use alternative technologies. The feature set of CSS and SVG sometimes overlap. What works in one may work in the other and vice versa. As it happens, the concept of clipping exists in both CSS and SVG<\/a>. The SVG clipping syntax is quite different, but it works the same. The good thing about SVG clipping compared to CSS is its maturity level. Support is good all the way back to old IE browsers. Most bugs are fixed by now (or at least one hope they are).<\/p>\n

This is what the SVG clipping support looks like:<\/p>\n

This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>

Desktop<\/h4>
Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
4<\/span><\/td>3<\/span><\/td>11<\/span><\/td>12<\/span><\/td>3.2<\/span><\/td><\/tr><\/table><\/div>

Mobile \/ Tablet<\/h4>
Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
124<\/span><\/td>125<\/span><\/td>4.4<\/span><\/td>3.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n

Clipping as a transition<\/h3>\n

A neat use case for clipping is transition effects. Take The Silhouette Slideshow demo on CodePen:<\/p>\n

See the Pen Silhouette zoom slideshow<\/a> by Mikael Ainalem (@ainalem<\/a>) on CodePen<\/a>.<\/p>\n

A “regular” slideshow cycles though images. Here, to make it a bit more interesting, there’s a clipping effect when switching images. The next image enters the screen through a silhouette of of the previous image. This creates the illusion that the images are connected to one another, even if they are not.<\/p>\n

The transitions follow this process:<\/p>\n

    \n
  1. Identify the focal point (i.e., main subject) of the image<\/li>\n
  2. Create a clipping path for that object<\/li>\n
  3. Cut the next image with the path<\/li>\n
  4. The cut image (silhouette) fades in<\/li>\n
  5. Scale the clipping path until it’s bigger than the viewport<\/li>\n
  6. Complete the transition to display the next image<\/li>\n
  7. Repeat!<\/li>\n<\/ol>\n

    Let\u2019s break down the sequence, starting with the first image. We\u2019ll split this up into multiple pens so we can isolate each step.<\/p>\n

    explained I” class=”codepen”>See the Pen Silhouette zoom slideshow explained I<\/a> by Mikael Ainalem (@ainalem<\/a>) on CodePen<\/a>.<\/p>\n

    This is the basic structure of the SVG markup:<\/p>\n

    <svg>\r\n  ...\r\n  <image class=\"...\" xlink:href=\"...\" \/>\r\n  ...\r\n<\/svg><\/code><\/pre>\n
    For this image, we then want to create a mask of the focal point \u2014 in this case, the person\u2019s silhouette. If you\u2019re unsure how to go about creating a clip, check out my previous article<\/a> for more details because, generally speaking, making cuts in CSS and SVG is fundamentally the same:<\/p>\n
      \n
    1. Import an image into the SVG editor<\/li>\n
    2. Draw a path around the object<\/li>\n
    3. Convert the path to the syntax for SVG clip path. This is what goes in the SVG\u2019s <defs><\/code> block.<\/li>\n
    4. Paste the SVG markup into the HTML<\/li>\n<\/ol>\n
      If you\u2019re handy with the editor, you can do most of the above in the editor. Most editors have good support for masks and clip paths. I like to have more control over the markup, so I usually do at least some of the work by hand. I find there\u2019s a balance between working with an SVG editor vs. working with markup. For example, I like to organize the code, rename the classes and clean up any cruft the editor may have dropped in there.<\/p>\n
      Mozilla Developer Network does a fine job of documenting SVG clip paths<\/a>. Here\u2019s a stripped-down version of the markup used by the original demo to give you an idea of how a clip path fits in:<\/p>\n
      <svg>\r\n  <defs>\r\n    <clipPath id=\"clip\"> <!-- Clipping defined -->\r\n      <path class=\"clipPath clipPath2\" d=\"...\" \/>\r\n    <\/clipPath>\r\n  <\/defs>\r\n  ...\r\n  <path ... clip-path=\"url(#clip)\"\/> <!-- Clipping applied -->\r\n<\/svg><\/code><\/pre>\n
      Let\u2019s use a colored rectangle as a placeholder for the next image in the slideshow. This helps to clearly visualize the shape that part that\u2019s cut out and will give a clearer idea of the shape and its movement.<\/p>\n
      explained II” class=”codepen”>See the Pen Silhouette zoom slideshow explained II<\/a> by Mikael Ainalem (@ainalem<\/a>) on CodePen<\/a>.<\/p>\n
      Now that we have the silhouette, let\u2019s have a look at the actual transition. In essence, we\u2019re looking at two parts of the transition that work together to create the effect:<\/p>\n