Clip Path Animation Practice


by Jeremy Caudle
code

Today I've made an animation using the clip-path property. It's a bit tricky to figure out how adjusting the polygon will alter the shape during the animation. I would think a tool like Sketch, Figma, of maybe Adobe XD would be able to give me a way to see how the polygon will change throughout the animation.

View the code:

HTML and JS 
<div class="codedoodle-block">
			<a class="box clip-triangle">Triangle</a>
</div>
CSS 
.codedoodle-block {
			margin: 1rem auto;
			max-width: 30rem;
			background-color: rgba(0, 0, 0, 0.2);
			padding: 1rem;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			justify-items: center;
			align-items: center;
		}
		
		
		.box {
			background-color: green;
			display: flex;
			flex-flow: column;
			width: 5rem;
			height: 5rem;
			justify-content: center;
			align-content: center;
			text-align: center;
		}
	
		.clip-triangle {
			clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
			/*-moz-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);*/
			-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
			grid-column: 2 / 3;
		}
		
		@keyframes morph {
			0% {
				clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
				-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
			}
			100% {
				clip-path: polygon(50% 0%, 0% 50%, 100% 100%);
				-webkit-clip-path: polygon(50% 0%, 0% 50%, 100% 100%);
			}
		}
		
		.clip-triangle:hover, .clip-triangle:active, .clip-triangle:focus {
		animation: morph 1s ease-in-out 0s infinite alternate;
		}

Tags