Clip Path Animation

Posted on : 19th June 2022 | Author : @ByDev24

						<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div class="code-container">
	<table width="100%" cellpadding="15" border="1">
		<tbody>
			<tr>
				<td rowspan="5">
					<div class="element"></div>
				</td>
				<td><button type="button" class="animation-btn" data="0">Triangle</button></td>
			</tr>
			<tr>
				<td><button type="button" class="animation-btn" data="1">Rhombus</button></td>
			</tr>
			<tr>
				<td><button type="button" class="animation-btn" data="2">Parallelogram</button></td>
			</tr>
			<tr>
				<td><button type="button" class="animation-btn" data="3">Trapezoid</button></td>
			</tr>
			<tr>
				<td><button type="button" class="animation-btn" data="4">Square</button></td>
			</tr>
		</tbody>
	</table>
</div>

						body{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}
.code-container {
	width: 450px;
	max-width: 100%;
	padding: 10px;
	box-shadow: 0px 0px 10px #0000000d;
	border-radius: 10px;
}
.code-container table {
    border-collapse: collapse;
    border-color: #e5e5e5;
}
.element {
    width: 200px;
    height: 200px;
    background: #f94a83;
    margin: 0 auto;
    transition: clip-path 1s;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.code-container button:focus {
    background: #ed8686;
    border: 1px solid #ed8686;
    color: #fff;
}

.code-container button {
    border: 1px solid #d7d7d7;
    padding: 6px 10px;
}

						var paths = [
	'clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%)',
	'clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
	'clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)',
	'clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)',
	'clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)'
]
var buttons = document.querySelectorAll(".animation-btn");
for (var i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener("click", function (e) {
		var target = e.target.getAttribute("data")
		document.querySelector(".element").setAttribute("style",paths[target]);
	});
}