JSFiddle - React, Tailwind, and code Playground

Clip-Path Transitions tests

by Travis Almand

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 200 200" width="200" height="200">
  <defs>
  
    <path d="M108.03 309.43C171.49 317.9 219.9 380.48 253.28 497.16L535.64 508.19C601.32 334.66 610.64 219.46 563.58 162.6C516.52 105.74 386.86 94.95 174.61 130.25C66.76 241.23 44.57 300.96 108.03 309.43Z" id="a4RfYuIGnh"/>
  </defs>
  <g>
    <g>
      <g>
        <use xlink:href="#a4RfYuIGnh" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="1"/>
      </g>
    </g>
  </g>
</svg>

<div id="app">
  <div>
    <button @click="transition('circle')">circle</button>
    <button @click="transition('square')">square</button>
    <button @click="transition('ellipse')">ellipse</button>
    <button @click="transition('inset')">inset</button>
    <button @click="transition('triangles')">triangles</button>
  </div>
  
  <div>
    <button @click="transition('up')">up</button>
    <button @click="transition('down')">down</button>
    <button @click="transition('right')">right</button>
    <button @click="transition('left')">left</button>
  </div>
  
  <div>
    <button @click="transition('rotate-square')">rotate square</button>
    <button @click="transition('rotate-circle')">rotate circle</button>
    <button @click="transition('two-axis')">two axis</button>
    <button @click="transition('spotlight')">spotlight</button>
  </div>
  
  <div>
    <button @click="transition('chevron-left')">chevron left</button>
    <button @click="transition('chevron-right')">chevron right</button>
    <button @click="transition('spiral')">spiral</button>
    <button @click="transition('angle-spiral')">angle spiral</button>
    <button @click="transition('slots')">slots</button>
    <button @click="transition('shutters')">shutters</button>
    <button @click="transition('half-shutters')">half shutters</button>
  </div>
  
  <div>
    <button...

SCSS

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

#app {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

#container {
  align-items: center;
  background-color: #C5C5C5;
  border: 3px solid #707070;
  display: flex;
  height: 300px;
  justify-content: center;
  width: 300px;
}

button,
select {
  margin: 10px;
}

.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;
}

// basic shapes
.circle-enter-active { animation: 1s circle reverse; }
.circle-leave-active { animation: 1s circle; }
@keyframes circle {
  0% { clip-path: circle(75%); }
  100% { clip-path: circle(0%); }
}

.square-enter-active { animation: 1s square reverse; }
.square-leave-active { animation: 1s square; }
@keyframes square {
  0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
  100% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }
}

.ellipse-enter-active { animation: 1s ellipse reverse; }
.ellipse-leave-active { animation: 1s ellipse; }
@keyframes ellipse {
  0% { clip-path: ellipse(80% 80%); }
  100% { clip-path: ellipse(0% 20%); }
}

.inset-enter-active { animation: 1s inset reverse; }
.inset-leave-active { animation: 1s inset; }
@keyframes inset {
	0% { clip-path: inset(0% round 0); }
	100% { clip-path: inset(50% round 50%); }
}

.triangles-enter-active { animation: 1s triangles reverse; }
.triangles-leave-active { animation: 1s triangles; }
@keyframes triangles {
  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  25% { clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%); }
  50% { clip-path: polygon(0 0, 50% 50%, 100% 0, 50% 50%, 100% 100%, 0 100%); }
  75% { clip-path: polygon(0 0, 50% 50%, 100% 0, 50% 50%, 100% 100%, 50% 50%, 0 100%); }
 ...

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: 'circle',
    mode: 'out-in'
  },
  methods: {
  	transition (type) {
    	this.box1 = !this.box1;
    	this.currentTransition = type;
    }
  }
})