JSFiddle - React, Tailwind, and code Playground

Clip-Path Complex Shapes

by Travis Almand

HTML

<div id="app">
	<div class="title">
		<h1>Clip-Path: Complex Shapes</h1>
	</div>
	<div class="panel">
		<label for="shapes">Animations</label>
		<select id="shapes" v-model="currentTransition">
			<option value="chevron">chevron</option>
			<option value="spiral">spiral</option>
      <option value="slots">slots</option>
      <option value="shutters">shutters</option>
      <option value="star">star</option>
		</select>
		
		<label for="modes">Modes</label>
		<select id="modes" v-model="mode">
			<option value="">none</option>
			<option value="out-in">out-in</option>
			<option value="in-out">in-out</option>
		</select>
		
		<button @click="transition">transition</button>
	</div>
	<div class="boxes">
		<transition :name="currentTransition" :mode="mode">
      <box1 v-if="box1"></box1>
      <box2 v-else></box2>
    </transition>		
	</div>
	<div class="example">
		<transition name="fade" mode="out-in">
			<div class="container" :key="currentTransition" v-html="descriptions[currentTransition]"></div>
		</transition>
	</div>
	<div class="instructions">
		<ul>
			<li>Choose from four different types of clip-path animations in the "Animations" dropdown.</li>
			<li>Choose from the different Vue Transition Component modes in the "Modes" dropdown that control the order of the boxes transitioning.</li>
			<li>Click the "Transition" button to see the selected options being animated.</li>
		</ul>
	</div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');

html {
  box-sizing: border-box;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html,
body {
  background-color: #1d1e22;
  margin: 0;
  padding: 0;
}
body {
	align-items: center;
	display: flex;
	height: 100vh;
	justify-content: center;
}

#app {
	display: grid;
  grid-template-columns: 200px 300px 400px;
  grid-gap: 20px;
	
	.title {
		color: #FFF;
		grid-column: 1 / 4;
	
		h1 {
			font-size: 20px;
			font-weight: bold;
		}
	}
	
	.instructions {
		color: #FFF;
		grid-column: 1 / 4;
		
		ul {
			list-style: disc;
		}
		li {
			margin-bottom: 10px;
		}
	}
}


.panel {
	display: flex;
	flex-direction: column;
	
	label {
		color: #fff;
	}
	
	button,
	select {
		font-size: 18px;
		margin: 10px 0;
		padding: 5px 0;
	}
}

.boxes {
  align-items: center;
  background-color: #C5C5C5;
  border: 3px solid #FFF;
  display: flex;
  height: 300px;
  justify-content: center;
  width: 300px;
  
  &::before {
    background-color: darken(#C5C5C5, 10%);
    content: '';
    display: block;
    height: 200px;
    position: absolute;
    width: 200px;
  }
  &::after {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    content: "Sorry!\A\AThis browser doesn't support this type of clip-path animations!";
    display: flex;
    height: 200px;
    position: absolute;
    text-align: center;
    white-space: pre-wrap;
    width: 200px;
  }
	
	.box {
		align-items: center;
		background-color: #307B21;
		color: #fff;
		display: flex;
		font-family: 'Luckiest Guy';
		font-size: 60px;
		height: 200px;
		justify-content: center;
		position: absolute;
		width: 200px;
	}
	.box2 {
		background-color: #4371AD;
	}
}
@supports(clip-path: polygon(0% 0%, 10% 10%, 20% 20%)) {
  .boxes::after {
    display: none;
  }
}

.example {
	color: #FFF;
	
	p {
		margin-bottom:...

Vue

console.clear();

Vue.component('box1', {
	template: '<div class="box box1">box1</div>'
});
Vue.component('box2', {
	template: '<div class="box box2">box2</div>'
});

new Vue({
  el: "#app",
  data: {
  	box1: true,
    currentTransition: 'chevron',
    mode: 'out-in',
		descriptions: {
			chevron: '<p>The chevron animation uses the polygon shape with six vertices.</p><p>The leave transition starts with all the vertices forming a square to cover the box. The next step of the animation animates three of the points into a chevron pointing to the right. The animation completes with moving all six points out of the box area to the right.</p><p>The enter transition does the same in reverse; the chevron slides in from the left, stops, and then the three vertices animate the shape back into a square.</p>',
			spiral: '<p>The sprial animation uses the polygon shape with fifteen vertices arranged in a spiral and eight keyframes in the animation.</p><p>In the leave transition animates the spiral so that at each keyframe the vertices are moved on top of neighboring vertices. Over time this gives the appearance of a spiral unwinding to the upper left of the box area.</p><p>The enter transition does the same in reverse; starting in the upper left and winding inward to the center.</p>',
      slots: '<p>The slots animation uses the polygon shape with sixteen vertices arranged in a series of vertical lines of overlapping vertices forming slots.</p><p>The leave transition first animates every other vertical slot from the top down to the bottom. The next keyframe of the animation animates the leftover slots downard in the same motion. This provides the appearance of alternating slots disappearing off the bottom of the box area.</p><p>The enter transition does the same in reverse; alternating slots animate upwards to the top of the box area.</p>',
      shutters: '<p>The shutters animation uses the polygon shape with twenty vertices arranged in a series of vertical lines of...