Impossiblue

clip-path – Part 2

This is not an article about the GreenSock Animation Platform (GSAP). That would require its own series of articles. Just the shortest of intros will have to do for now:

GSAP is a JavaScript library for high-performance HTML5 animations that work in all major browsers. No other library delivers such advanced sequencing, reliability, API efficiency, and tight control while solving real-world problems … GSAP can animate any numeric property of any JS object, not just CSS properties.

A very basic CodePen example from the socks themselves:

Fig. 1. Hover over the image to reveal the animation. Note that the original code uses the deprecated clip property. There may also be a flash of the hidden image shown on page load.

Now, on to my own inspiration:

CSS animations and transitions are possible with two or more clip-path shapes with the same number of points.

As GSAP is based on JavaScript – and because I like the animation above – I thought it might be interesting to find a simpler alternative based on pure CSS. This is by no means meant to downplay GSAP which really shines in more complex animations. Anyway, what follows is an experiment with the CSS clip-path property. Take it or leave it.

Fig. 2. Hover over the green square to reveal pure CSS morphing of a twelve-point polygon – and a thumbnail of Natalina Cavaliéri, Italian soprano and actress.

The HTML

<div id="background">
	<div id="hidden"></div>
</div>

The CSS

#background {
	position: relative;
	width: 121px; /* Odd number for absolute centering */
	height: 121px; /* Odd number for absolute centering */
	background-color: #475f14;
	}
#hidden {
	position: absolute;
	top: 0;
	left: 0;
	width: 121px;
	height: 121px;
	background-image: url("path/to/image.jpg"); /* Fallback for ignorant browsers */
	background-image: -webkit-image-set(url("path/to/image.jpg") 1x, url("path/to/imagex2.jpg") 2x);
	background-image: image-set(url("path/to/image.jpg") 1x, url("path/to/imagex2.jpg") 2x); /* Incl. retina */
	cursor: pointer;
	transition: all 1s ease-in-out;
	-webkit-clip-path: polygon(0 0, 61px 61px, 61px 61px, 121px 0, 61px 61px, 61px 61px, 121px 121px, 61px 61px, 61px 61px, 0 121px, 61px 61px, 61px 61px);
	clip-path: polygon(0 0, 61px 61px, 61px 61px, 121px 0, 61px 61px, 61px 61px, 121px 121px, 61px 61px, 61px 61px, 0 121px, 61px 61px, 61px 61px);
	}
#background:hover #hidden {
	-webkit-clip-path: polygon(0 0, 0 0, 121px 0, 121px 0, 121px 0, 121px 121px, 121px 121px, 121px 121px, 0 121px, 0 121px, 0 121px, 0 0);
	clip-path: polygon(0 0, 61px 61px, 61px 61px, 121px 0, 61px 61px, 61px 61px, 121px 121px, 61px 61px, 61px 61px, 0 121px, 61px 61px, 61px 61px);
	}

Notes: The clip-path in figure 2 is set up with (absolute) pixel values but could have used percentages for general application (i.e. widths and heights of the containers could be changed at will with no consideration for the clip points). Both demonstrations, by the way, only work with input devices such as mice and pens. Touch-devices miss the fun.

Reference

Sara Soueidan, Animating CSS shapes with CSS animations and transitions

◀ Part 1