Clip Path Route Transitions
View/page transitions done in a bit of a new way, using the CSS clip-path property. Here I’ll discuss the clip-path property and route transitions using this property.
tl;dr: See the experiment at https://jayant.dev/experiments/clip-path-route, and be cautious of render performance if you do this.
Anyone reading this likely has built quite a few web projects in their lives which involve multiple UI views set on different routes.
There are a million exciting and creative ways in which people achieve route transitions, a crazy example of this is the site http://lusion.co/. The whole site is based around 3D visualizations, and if you click around the navbar you’ll see that those visualizations are used to “extend” the page into new content. It’s crazy, and it’s something you’ll understand if you see it.
Now that you’ve seen that, you’ll probably be disappointed by the rest of what you’re about to read but it could be useful nonetheless.
The idea is to offer a way to transition between views in a way that doesn’t move the entire content around (like many examples do where elements slide-in/out of the page), and works great with pages with similar content (like switching between multiple screens with tabular data).
We do this using the
clip-path property. https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
This property allows you to clip the visible region of an element, that is, your element will remain in the same place while parts of it will be clipped out and rendered invisible to us. Since this allows you to achieve selective visibility of an element without affecting layout, you can do pretty cool things with it.
You can make an image show up like a star, or you can make a wall of text show up like a curved ribbon if you find that fancy, or, you can make the content animate in with a sweeping motion, as if something is unveiling the curtains off from your page, you’ve seen the demo, you know the idea.
How we’ve done it here is using these things:
1. Use Framer Motion to trigger entry or exit animations on an element (totally doable manually)
2. Since all we’re doing is animating in the route contents, we ensure that they are absolutely positioned within their routes container. This is needed because when we’re animating the contents of one route over the other, both elements exist on the DOM at the same time for the duration of the animation.
That is basically all you need, but if you’ve tried out the experiment, you’ve noticed that when you transition in/out of route 2, the animations go laggy and it isn’t a great experience there. Why? Because we’re already animating a bunch of things on route 2. While this experiment in itself is… experimental, hence not optimized as such, this will always remain a pain point on weaker devices. But, even if it was optimized, the fact that we use
clip-path will remain a point of performance issues because animating clip-path triggers a paint on each frame that it tries to render (this is not the case with CSS Transforms as they don’t trigger a full paint).
The use-cases that can be covered with clip-path like this aren’t nearly as easy to do with transforms and a combinations of elemental trickery (clip-path involves its own share of trickery like absolute/fixed positioning of things), but depending on how complex your data is, or is not, it might work for you.
Here’s another link that I read when looking up information for this article that you might find useful: https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse