Scroll Divider 2nd Star to the Right Color Clip Art

clip-path is ane of those CSS backdrop we more often than not know is there simply might non reach for often for any reason. It's a niggling intimidating in the sense that information technology feels like math class because information technology requires working with geometric shapes, each with dissimilar values that draw certain shapes in certain ways.

Nosotros're going to swoop right into clip-path in this commodity, specifically looking at how we can use information technology to create pretty circuitous animations. I promise you'll see merely how awesome the belongings and it's shape-shifting powers can be.

But first, let's practise a quick recap of what we're working with.

Clip-path crash form

Just for a quick explanation every bit to what the prune-path is and what it provides, MDN describes it like this:

The clip-path CSS property creates a clipping region that sets what function of an element should be shown. Parts that are within the region are shown, while those outside are hidden.

Consider the circle shape provided by clip-path. Once the circle is defined, the expanse within it can be considered "positive" and the expanse outside it "negative." The positive space is rendered while the negative space is removed. Taking advantage of the fact that this human relationship between positive and negative space tin can be animated provides for interesting transition effects… which is what we're getting into in just a bit.

clip-path comes with four shapes out of the box, plus the ability to use a URL to provide a source to another SVG <clipPath> element. I'll let the CSS-Tricks almanac become into deeper item, simply here are examples of those first four shapes.

Shape	Case	Consequence
Circle	`clip-path: circumvolve(25% at 25% 25%);`
Ellipse	`clip-path: ellipse(25% 50% at 25% 50%);`
Inset	`clip-path: inset(10% 20% xxx% xl% round 25%);`
Polygon	`prune-path: polygon(fifty% 25%, 75% 75%, 25% 75%);`

Combining clippings with CSS transitions

Animating clip-path can exist as simple as changing the property values from ane shape to some other using CSS transitions, triggered either by changing classes in JavaScript or an interactive change in state, similar :hover:

          .box {   clip-path: circumvolve(75%);   transition: clip-path 1s; }  .box:hover {   clip-path: circle(25%); }

Run across the Pen
clip-path with transition by Geoff Graham (@geoffgraham)
on CodePen.

We can as well employ CSS animations:

          @keyframes circumvolve {   0% { clip-path: circle(75%); }   100% { clip-path: circle(25%); } }

Come across the Pen
clip-path with CSS animation by Geoff Graham (@geoffgraham)
on CodePen.

Some things to consider when animating prune-path:

Information technology just affects what is rendered and does non alter the box size of the element equally relating to elements around it. For case, a floated box with text flowing around information technology will still take up the same amount of infinite fifty-fifty with a very small percentage clip-path practical to it.
Any CSS backdrop that extend beyond the box size of the element may be clipped. For case, an inset of 0% for all iv sides that clips at the edges of the element will remove a box-shadow and require a negative percentage to see the box-shadow. Although, that could lead to interesting furnishings in of itself!

OK, permit'southward get into some lite animation to kick things off.

Comparing the simple shapes

I've put together a demo where y'all tin run into each shape in action, along with a picayune explanation describing what's happening.

Encounter the Pen
Animative Prune-Path: Simple Shapes by Travis Almand (@talmand)
on CodePen.

The demo makes use of Vue for the functionality, but the CSS is easily transferred to any other type of project.

Nosotros tin break those out a little more than to go a handle on the values for each shape and how changing them affects the move

Circle

          prune-path: circle(<length|percentage> at <position>);

Circle accepts ii properties that can be animated:

Shape radius: can exist a length or percent
Position: can exist a length or percentage along the 10 and y axis

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

The circle shape is resized in the leave transition from an initial 75% radius (just enough to let the chemical element to appear fully) downwardly to 0%. Since no position is prepare, the circumvolve defaults to the middle of the element both vertically and horizontally. The enter transition plays the blitheness in opposite by means of the "reverse" keyword in the animation property.

Ellipse

          clip-path: ellipse(<length|per centum>{2} at <position>);

Ellipse accepts three properties that can exist animated:

Shape radius: can be a length or percentage on the horizontal centrality
Shape radius: can be a length or pct on the vertical axis
Position: tin be a length or percent along the x and y axis

          .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% twenty%); } }

The ellipse shape is resized in the exit transition from an initial 80% by 80%, which makes it a round shape larger than the box, down to 0% by 20%. Since no position is gear up, the ellipse defaults to the middle of the box both vertically and horizontally. The enter transition plays the animation in reverse by means of the "reverse" keyword in the animation property.

The effect is a shrinking circle that changes to a shrinking ellipse taller than wide wiping abroad the first element. And then the elements switch with the second element appearing inside the growing ellipse.

Inset

          clip-path: inset(<length|percentage>{1,four} round <border-radius>{1,four});

The inset shape has up to 5 properties that can be animated. The first four stand for each edge of the shape and carry similar to margins or padding. The start property is required while the next three are optional depending on the desired shape.

Length/Per centum: tin represent all four sides, top/bottom sides, or tiptop side
Length/Percentage: can stand for left/right sides or correct side
Length/Percentage: represents the bottom side
Length/Percent: represents the left side
Border radius: requires the "circular" keyword before the value

I matter to keep in heed is that the values used are reversed from typical CSS usage. Defining an edge with null means that cipher has inverse, the shape is pushed outward to the chemical element's side. Equally the number is increased, say to 10%, the edge of the shape is pushed inward away from the element's side.

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

The inset shape is resized in the leave transition from a full-sized foursquare downward to a circle because of the rounded corners irresolute from 0% to fifty%. Without the round value, it would appear every bit a shrinking foursquare. The enter transition plays the animation in opposite by means of the "reverse" keyword in the animation property.

The consequence is a shrinking square that shifts to a shrinking circle wiping away the first element. After the elements switch the 2d chemical element appears within the growing circumvolve that shifts to a growing foursquare.

Polygon

          clip-path: polygon(<length|percentage>);

The polygon shape is a somewhat special instance in terms of the properties it can animate. Each property represents vertices of the shape and at least iii is required. The number of vertices across the required 3 is only limited by the requirements of the desired shape. For each keyframe of an animation, or the 2 steps in a transition, the number of vertices must always friction match for a smooth blitheness. A change in the number of vertices tin can be blithe, but will cause a popping in or out upshot at each keyframe.

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

The eight vertices in the polygon shape make a square with a vertex in the four corners and the midpoint of all iv sides. On the get out transition, the shape's corners animate inwards to the center while the side'south midpoints animate inward halfway to the center. The enter transition plays the animation in contrary by means of the "contrary" keyword in the animation property.

The effect is a foursquare that collapses inward downwardly to a plus shape that wipes away the element. The elements so switch with the 2d element appears in a growing plus shape that expands into a square.

Allow's get into some simple movements

OK, we're going to punch things up a bit now that we've gotten past the basics. This demo shows various ways to have movement in a clip-path animation. The circle and ellipse shapes provide an easy way to animate motility through the position of the shape. The inset and polygon shapes can exist animated in a way to give the advent of position-based move.

Meet the Pen
Animating Prune-Path: Simple Movements by Travis Almand (@talmand)
on CodePen.

Permit'southward break those out just like nosotros did earlier.

Slide Down

The slide down transition consists of two unlike animations using the inset shape. The first, which is the leave animation, animates the top value of the inset shape from 0% to 100% providing the appearance of the unabridged square sliding downwardly out of view. The second, which is the enter animation, has the bottom value at 100% and and then animates it downwardly towards 0% providing the advent of the entire foursquare sliding downwardly into view.

          .down-enter-agile { animation: 1s downward-enter; } .downwardly-go out-active { animation: 1s down-leave; }  @keyframes down-enter {   0% { prune-path: inset(0 0 100% 0); }   100% { prune-path: inset(0); } }  @keyframes down-leave {   0% { clip-path: inset(0); }   100% { prune-path: inset(100% 0 0 0); } }

As yous can encounter, the number of sides being defined in the inset path do non need to match. When the shape needs to exist the full square, a unmarried zippo is all that is required. It can and then animate to the new country fifty-fifty when the number of divers sides increases to iv.

Box-Wipe

The box-wipe transition consists of two animations, again using the inset shape. The first, which is the leave animation, animates the unabridged foursquare down to a half-size squared positioned on the chemical element'southward left side. The smaller square then slides to the correct out of view. The second, which is the enter animation, animates a like half-size square into view from the left over to the element'southward right side. Then information technology expands outward to reveal the unabridged element.

          .box-wipe-enter-active { blitheness: 1s box-wipe-enter; } .box-wipe-leave-agile { animation: 1s box-wipe-leave; }  @keyframes box-wipe-enter {   0% { clip-path: inset(25% 100% 25% -50%); }   50% { clip-path: inset(25% 0% 25% 50%); }   100% { clip-path: inset(0); } }  @keyframes box-wipe-leave {   0% { clip-path: inset(0); }   fifty% { clip-path: inset(25% fifty% 25% 0%); }   100% { prune-path: inset(25% -50% 25% 100%); } }

When the full element is shown, the inset is at zero. The 50% keyframes define a half-size square that is placed on either the left or right. There are two values representing the left and right edges are swapped. Then the foursquare is then moved to the opposite side. As ane side is pushed to 100%, the other must go to -l% to maintain the shape. If it were to animate to zero instead of -l%, so the square would compress equally it animated across instead of moving out of view.

Rotate

The rotate transition is one animation with five keyframes using the polygon shape. The initial keyframe defines the polygon with four vertices that shows the entire element. Then, the next keyframe changes the 10 and y coordinates of each vertex to be moved inward and near the next vertex in a clockwise fashion. After all four vertices have been transitioned, it appears the square has shrunk and rotated a quarter plough. The following keyframes practice the same until the square is complanate downwards to the middle of the chemical element. The leave transition plays the animation normally while the enter transition plays the animation in contrary.

          .rotate-enter-active { blitheness: 1s rotate opposite; } .rotate-exit-active { animation: 1s rotate; }  @keyframes rotate {   0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }   25% { clip-path: polygon(87.v% 12.five%, 87.5% 87.five%, 12.5% 87.5%, 12.v% 12.5%); }   50% { clip-path: polygon(75% 75%, 25% 75%, 25% 25%, 75% 25%); }   75% { clip-path: polygon(37.5% 62.5%, 37.5% 37.5%, 62.five% 37.5%, 62.five% 62.5%); }   100% { clip-path: polygon(50% fifty%, fifty% 50%, fifty% 50%, 50% fifty%); } }

Polygons tin exist animated into any other position once its vertices have been prepare, every bit long as each keyframe has the same number of vertices. This can make many interesting furnishings with careful planning.

Spotlight

The spotlight transition is one animation with five keyframes using the circle shape. The initial keyframe defines a full-size circumvolve positioned at the heart to prove the unabridged chemical element. The next keyframe shrinks the circle downwards to twenty percentage. Each following keyframe animates the position values of the circle to move information technology to dissimilar points on the element until it moves out of view to the left. The leave transition plays the animation normally while the enter transition plays the animation in contrary.

          .spotlight-enter-agile { animation: 2s spotlight reverse; } .spotlight-get out-active { animation: 2s spotlight; }  @keyframes spotlight {   0% { prune-path: circle(100% at fifty% 50%); }   25% { prune-path: circle(xx% at 50% 50%); }   l% { clip-path: circumvolve(20% at 12% 84%); }   75% { clip-path: circle(20% at 93% 51%); }   100% { clip-path: circle(20% at -30% 20%); } }

This may be a complex-looking animation at commencement, simply turns out it simply requires simple changes in each keyframe.

More than adventurous stuff

Like the shapes and uncomplicated movements examples, I've made a demo that contains more complex animations. We'll break these downwardly individually too.

Come across the Pen
Animating Clip-Path: Complex Shapes by Travis Almand (@talmand)
on CodePen.

All of these examples brand heavy utilize of the polygon shape. They take advantage of features similar stacking vertices to brand elements appear "welded" and repositioning vertices around for movement.

Check out Ana Tudor'southward "Cut out the inner part of an chemical element using clip-path" article for a more than in-depth example that uses the polygon shape to create complex shapes.

Chevron

The chevron transition is made of two animations, each with 3 keyframes. The leave transition starts out every bit a total square with half dozen vertices; there are the four corners but in that location are an boosted ii vertices on the left and right sides. The second keyframe animates 3 of the vertices into identify to change the foursquare into a chevron. The third keyframe then moves the vertices out of view to the right. After the elements switch, the enter transition starts with the same chevron shape but information technology is out of view on the left. The second keyframe moves the chevron into view and then the third keyframe restores the full foursquare.

          .chevron-enter-agile { blitheness: 1s chevron-enter; } .chevron-exit-active { animation: 1s chevron-go out; }  @keyframes chevron-enter {   0% { clip-path: polygon(-25% 0%, 0% l%, -25% 100%, -100% 100%, -75% 50%, -100% 0%); }   75% { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }   100% { clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% fifty%, 0% 0%); } }  @keyframes chevron-leave {   0% { clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%); }   25% { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% fifty%, 0% 0%); }   100% { clip-path: polygon(175% 0%, 200% l%, 175% 100%, 100% 100%, 125% fifty%, 100% 0%) } }

Spiral

The screw transition is a stiff example of a complicated series of vertices in the polygon shape. The polygon is created to define a shape that spirals in clockwise from the upper-left of the element. Since the vertices create lines that stack on top of each other, it all appears every bit a unmarried square. Over the eight keyframes of the animation, vertices are moved to be on top of neighboring vertices. This makes the shape appear to unwind counter-clockwise to the upper-left, wiping away the chemical element during the exit transition. The enter transition replays the animation in reverse.

          .spiral-enter-active { blitheness: 1s spiral reverse; } .spiral-leave-active { animation: 1s spiral; }  @keyframes spiral {     0% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 50%, 50% l%, 25% fifty%, 25% 75%, 75% 75%, 75% 25%, 0% 25%); }   14.25% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 75% 25%, 75% 75%, 50% 75%, fifty% 50%, fifty% 50%, 25% l%, 25% 75%, 75% 75%, 75% 25%, 0% 25%); }   28.five% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 75% 25%, 75% 50%, fifty% 50%, l% l%, 50% 50%, 25% 50%, 25% 75%, 75% 75%, 75% 25%, 0% 25%); }   42.75% { prune-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 25% 25%, 25% l%, 25% 50%, 25% fifty%, 25% 50%, 25% 50%, 25% 75%, 75% 75%, 75% 25%, 0% 25%); }   57% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 75%, 25% 75%, 25% 75%, 25% 75%, 25% 75%, 25% 75%, 25% 75%, 25% 75%, 75% 75%, 75% 25%, 0% 25%); }   71.25% { prune-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 25%, 0% 25%); }   85.five% { clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 0% 25%); }   100% {clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 25%, 0% 25%, 0% 25%, 0% 25%, 0% 25%, 0% 25%, 0% 25%); } }

Slots

The slots transition is made of a series of vertices bundled in a blueprint of vertical slots with vertices stacked on height of each other for a complete square. The general thought is that the shape starts in the upper-left and the next vertex is fourteen% to the right. Side by side vertex is in the exact same spot. And then the one later on that is another fourteen% to the right, and and then on until the upper-right corner is reached. This creates a series of "sections" along the top of the shape that are aligned horizontally. The 2d keyframe so animates every even department downward to the bottom of the element. This gives the appearance of vertical slots wiping away their parts of the element. The tertiary keyframe then moves the remaining sections at the top to the lesser. Overall, the get out transition wipes abroad half the element in vertical slots and and so the other half. The enter transition reverses the animation.

          .slots-enter-agile { animation: 1s slots reverse; } .slots-exit-agile { animation: 1s slots; }  @keyframes slots {   0% {     clip-path: polygon(0% 0%, 14% 0%, 14% 0%, 28% 0%, 28% 0%, 42% 0%, 42% 0%, 56% 0%, 56% 0%, 70% 0%, lxx% 0%, 84% 0%, 84% 0%, 100% 0, 100% 100%, 0% 100%);   }   50% {     prune-path: polygon(0% 0%, 14% 0%, 14% 100%, 28% 100%, 28% 0%, 42% 0%, 42% 100%, 56% 100%, 56% 0%, 70% 0%, 70% 100%, 84% 100%, 84% 0%, 100% 0, 100% 100%, 0% 100%);   }   100% {     clip-path: polygon(0% 100%, 14% 100%, xiv% 100%, 28% 100%, 28% 100%, 42% 100%, 42% 100%, 56% 100%, 56% 100%, seventy% 100%, 70% 100%, 84% 100%, 84% 100%, 100% 100%, 100% 100%, 0% 100%);   } }

Shutters

The shutters transition is very similar to the slots transition in a higher place. Instead of sections along the top, it creates vertical sections that are placed in line with each other to create the entire foursquare. Starting with the upper-left the second vertex is positioned at the top and 20% to the right. The side by side vertex is placed in the aforementioned identify horizontally but is at the lesser of the element. The next vertex after that is in the same spot with the next one dorsum at the top on tiptop of the vertex from two steps ago. This is repeated several times across the element until the right side is reached. If the lines of the shape were visible, then it would announced equally a serial of vertical sections lined up horizontally across the element. During the animation the left side of each section is moved over to be on acme of the correct side. This creates a wiping effect that looks like vertical shutters of a window. The enter transition plays the animation in reverse.

          .shutters-enter-active { animation: 1s shutters reverse; } .shutters-leave-active { animation: 1s shutters; }  @keyframes shutters {   0% {     clip-path: polygon(0% 0%, 20% 0%, 20% 100%, 20% 100%, 20% 0%, 40% 0%, 40% 100%, 40% 100%, 40% 0%, sixty% 0%, 60% 100%, 60% 100%, 60% 0%, 80% 0%, 80% 100%, 80% 100%, 80% 0%, 100% 0%, 100% 100%, 0% 100%);   }   100% {     clip-path: polygon(20% 0%, xx% 0%, twenty% 100%, 40% 100%, 40% 0%, xl% 0%, forty% 100%, 60% 100%, 60% 0%, 60% 0%, 60% 100%, lxxx% 100%, 80% 0%, eighty% 0%, fourscore% 100%, 100% 100%, 100% 0%, 100% 0%, 100% 100%, 20% 100%);   } }

Star

The star transition takes reward of how clip-path renders positive and negative infinite when the lines defining the shape overlap and cantankerous each other. The shape starts as a square with eight vertices; one in each corner and one on each side. There are merely three keyframes but there's a large amount of movement in each one. The leave transition starts with the foursquare and then moves each vertex on a side to the opposite side. Therefore, the summit vertex goes to the bottom, the bottom vertex goes to the top, and the vertices on the left and right do the same swap. This creates criss-crossing lines that grade a star shape in the positive space. The terminal keyframe then moves the vertices in each corner to the center of the shape which makes the star collapse in on itself wiping the element away. The enter transition plays the same in reverse.

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

Path shapes

OK, so nosotros've looked at a lot of examples of animations using clip-path shape functions. One function we haven't spent time with is path. It'due south perhaps the most flexible of the bunch because we tin draw custom, or even multiple, shapes with information technology. Chris has written and even spoken on it before.

And then, while I created demo for this set up of examples every bit well, notation that clip-path paths are experimental technology. As of this writing, it'southward but available in Firefox 63 or higher behind the layout.css.clip-path-path.enabled flag, which tin be enabled in most:config.

Meet the Pen
Animating Clip-Path: Path Shapes by Travis Almand (@talmand)
on CodePen.

This demo shows several uses of paths that are animated for transitions. The paths are the aforementioned type of paths institute in SVG and can be lifted from the path attribute to be used in the prune-path CSS property on an element. Each of the paths in the demo were actually taken from SVG I fabricated past hand for each keyframe of the animations. Much like animative with the polygon shape, careful planning is required as the number of vertices in the path cannot alter but only manipulated.

An advantage to using paths is that it can consist of multiple shapes within the path, each blithe separately to have fine-melody control over the positive and negative space. Some other interesting attribute is that the path supports Bézier curves. Creating the vertices is similar to the polygon shape, but polygon doesn't support Bézier curves. A bonus of this feature is that even the curves can exist animated.

That said, a disadvantage is that a path has to be built specifically for the size of the element. That's because there is no percentage-based placement, like we have with the other clip-path shapes . So, all the demos for this commodity have elements that are 200px square, and the paths in this specific demo are built for that size. Any other size or dimensions will lead to different outcomes.

Alright, enough talk. Permit'southward get to the examples because they're pretty sweet.

Iris

The iris transition consists of four modest shapes that form together to brand a complete large shape that splits in an iris design, much like a sci-fi type door. Each shape has its vertices moved and slightly rotated in the direction abroad from the center to move off their respective side of the element. This is done with only ii keyframes. The leave transition has the shapes move out of view while the enter transition reverses the effect. The path is formatted in a manner to make each shape in the path obvious. Each line that starts with "M" is a new shape in the path.

          .iris-enter-active { animation: 1s iris reverse; } .iris-leave-active { animation: 1s iris; }  @keyframes iris {   0% {     clip-path: path('       M103.13 100C103 32.96 135.29 -0.37 200 0L0 0C0.35 66.42 34.73 99.75 103.13 100Z       M199.35 200C199.83 133.21 167.75 99.88 103.thirteen 100C102.94 165.93 68.72 199.26 0.46 200L199.35 200Z       M103.13 100C167.46 99.75 199.54 133.09 199.35 200L200 0C135.15 -0.86 102.86 32.47 103.xiii 100Z       M0 200C68.63 200 103 166.67 103.13 100C34.36 100.12 -0.02 66.79 0 0L0 200Z     ');   }   100% {     clip-path: path('       M60.85 two.56C108.17 -44.93 154.57 -45.66 200.06 0.35L58.64 -141.07C11.93 -93.85 12.67 -45.97 threescore.85 2.56Z       M139.87 340.05C187.44 293.16 188.33 246.91 142.54 201.29C95.79 247.78 48.02 247.15 -0.77 199.41L139.87 340.05Z       M201.68 61.75C247.35 107.07 246.46 153.32 199.01 200.5L340.89 59.54C295.65 13.07 249.25 13.81 201.68 61.75Z       M-140.61 141.25C-92.08 189.78 -44.21 190.51 iii.02 143.46C-45.69 94.92 -46.43 47.05 0.81 -0.17L-140.61 141.25Z     ');   } }

Melt

The melt transition consists of two different animations for both entering and leaving. In the exit transition, the path is a foursquare but the height side is made up of several Bézier curves. At kickoff, these curves are made to exist completely apartment and so are blithe downwards to end across the bottom of the shape. As these curves movement downwardly, they are animated in unlike ways so that each curve adjusts differently than the others. This gives the appearance of the element melting out of view below the bottom.

The enter transition does much the same, except that the curves are on the bottom of the foursquare. The curves start at the top and are completely apartment. Then they are animated downward with the same curve adjustments. This gives the appearance of the second element melting into view to the lesser.

          .melt-enter-agile { blitheness: 2s melt-enter; } .melt-leave-agile { animation: 2s melt-leave; }  @keyframes melt-enter {   0% {     clip-path: path('M0 -0.12C8.33 -8.46 16.67 -12.62 25 -12.62C37.5 -12.62 35.91 0.15 50 -0.12C64.09 -0.4 62.v -34.5 75 -34.5C87.five -34.5 87.17 -four.45 100 -0.12C112.83 4.2 112.71 -17.95 125 -18.28C137.29 -18.62 137.76 1.54 150.48 -0.12C163.19 -1.79 162.16 -25.12 174.54 -25.12C182.79 -25.12 191.28 -xvi.79 200 -0.12L200 -34.37L0 -34.37L0 -0.12Z');   }   100% {     clip-path: path('M0 199.88C8.33 270.71 sixteen.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.vii 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');   } }  @keyframes melt-leave {   0% {     clip-path: path('M0 0C8.33 -8.33 16.67 -12.v 25 -12.5C37.v -12.5 36.57 -0.27 50 0C63.43 0.27 62.5 -34.37 75 -34.37C87.v -34.37 87.5 -4.01 100 0C112.v iv.01 112.38 -eighteen.34 125 -18.34C137.62 -xviii.34 138.09 one.66 150.48 0C162.86 -1.66 162.xvi -25 174.54 -25C182.79 -25 191.28 -16.67 200 0L200 200L0 200L0 0Z');   }   100% {     clip-path: path('M0 200C8.33 270.83 xvi.67 306.25 25 306.25C37.5 306.25 36.57 230.98 fifty 231.25C63.43 231.52 62.5 284.38 75 284.38C87.v 284.38 87.five 208.49 100 212.5C112.five 216.51 112.38 300.41 125 300.41C137.62 300.41 138.09 239.16 150.48 237.5C162.86 235.84 162.16 293.75 174.54 293.75C182.79 293.75 191.28 262.5 200 200L200 200L0 200L0 200Z');   } }

Door

The door transition is similar to the iris transition we looked at start — it'due south a "door" effect with shapes that move independently of each other. The path is made upwardly of 4 shapes: ii are half-circles located at the height and lesser while the other ii split the left over positive infinite. This shows that, non only can each shape in the path animate separately from each other, they tin can likewise exist completely different shapes.

In the leave transition, each shape moves away from the center out of view on its own side. The top one-half-circumvolve moves up leaving a hole behind and the lesser half-circle does the same. The left and right sides so slide abroad in a separate keyframe. And so the enter transition simply reverses the animation.

          .door-enter-active { animation: 1s door reverse; } .door-get out-active { animation: 1s door; }  @keyframes door {   0% {     clip-path: path('       M0 0C16.03 0.05 32.7 0.05 50 0C50.05 27.36 74.37 50.01 100 50C99.96 89.53 100.08 136.71 100 150C70.48 149.9 fifty.24 175.5 50 200C31.56 199.95 xiv.89 199.95 0 200L0 0Z       M200 0C183.46 -0.08 166.79 -0.08 150 0C149.95 21.45 133.25 49.82 100 50C100.04 89.53 99.92 136.71 100 150C130.29 150.29 149.95 175.69 150 200C167.94 199.7 184.6 199.7 200 200L200 0Z       M100 50C130.83 49.81 149.67 24.31 150 0C127.86 0.07 66.69 0.07 50 0C50.26 23.17 69.36 49.81 100 50Z       M100 150C130.83 150.xix 149.67 175.69 150 200C127.86 199.93 66.69 199.93 50 200C50.26 176.83 69.36 150.19 100 150Z     ');   }   50% {     clip-path: path('       M0 0C16.03 0.05 32.7 0.05 50 0C50.05 27.36 74.37 50.01 100 50C99.96 89.53 100.08 136.71 100 150C70.48 149.nine fifty.24 175.5 50 200C31.56 199.95 14.89 199.95 0 200L0 0Z       M200 0C183.46 -0.08 166.79 -0.08 150 0C149.95 21.45 133.25 49.82 100 50C100.04 89.53 99.92 136.71 100 150C130.29 150.29 149.95 175.69 150 200C167.94 199.7 184.6 199.seven 200 200L200 0Z       M100 -half dozen.25C130.83 -6.44 149.67 -31.94 150 -56.25C127.86 -56.18 66.69 -56.xviii 50 -56.25C50.26 -33.08 69.36 -6.44 100 -6.25Z       M100 206.25C130.83 206.44 149.67 231.94 150 256.25C127.86 256.eighteen 66.69 256.18 50 256.25C50.26 233.08 69.36 206.44 100 206.25Z     ');   }   100% {     clip-path: path('       Thousand-106.25 0C-90.22 0.05 -73.55 0.05 -56.25 0C-56.2 27.36 -31.88 50.01 -vi.25 50C-6.29 89.53 -six.17 136.71 -6.25 150C-35.77 149.9 -56.01 175.5 -56.25 200C-74.69 199.95 -91.36 199.95 -106.25 200L-106.25 0Z       M306.25 0C289.71 -0.08 273.04 -0.08 256.25 0C256.two 21.45 239.v 49.82 206.25 50C206.29 89.53 206.17 136.71 206.25 150C236.54 150.29 256.two 175.69 256.25 200C274.19 199.seven 290.85 199.7 306.25 200L306.25 0Z       M100 -6.25C130.83 -6.44 149.67 -31.94 150 -56.25C127.86 -56.18 66.69 -56.eighteen fifty -56.25C50.26 -33.08 69.36 -6.44 100 -vi.25Z       M100 206.25C130.83 206.44 149.67 231.94 150 256.25C127.86 256.18 66.69 256.eighteen fifty 256.25C50.26 233.08 69.36 206.44 100 206.25Z     ');   } }

10-Plus

This transition is different than most of the demos for this article. That'due south because other demos prove animating the "positive" space of the clip-path for transitions. Information technology turns out that animating the "negative" infinite can exist hard with the traditional clip-path shapes. It tin can be done with the polygon shape but requires careful placement of vertices to create the negative infinite and breathing them equally necessary. This demo takes advantage of having two shapes in the path; there's one shape that's a huge square surrounding the space of the chemical element and another shape in the middle of this square. The center shape (in this example an ten or +) excludes or "carves" out negative space in the outside shape. Then the center shape'southward vertices are animated so that only the negative space is being blithe.

The leave blitheness starts with the center shape as a tiny "x" that grows in size until the chemical element is wiped from view. The enter animation the center shape is a "+" that is already larger than the element and shrinks down to nothing.

          .ten-plus-enter-active { animation: 1s x-plus-enter; } .x-plus-exit-active { animation: 1s x-plus-leave; }  @keyframes x-plus-enter {   0% {     prune-path: path('M-400 600L-400 -400L600 -400L600 600L-400 600ZM0.01 -0.02L-200 -0.02L-200 199.98L0.01 199.98L0.01 400L200.01 400L200.01 199.98L400 199.98L400 -0.02L200.01 -0.02L200.01 -200L0.01 -200L0.01 -0.02Z');   }   100% {     clip-path: path('M-400 600L-400 -400L600 -400L600 600L-400 600ZM98.33 98.33L95 98.33L95 101.67L98.33 101.67L98.33 105L101.67 105L101.67 101.67L105 101.67L105 98.33L101.67 98.33L101.67 95L98.33 95L98.33 98.33Z');   } }  @keyframes 10-plus-leave {   0% {     prune-path: path('Grand-400 600L-400 -400L600 -400L600 600L-400 600ZM96.79 95L95 96.79L98.2 100L95 103.2L96.79 105L100 101.79L103.2 105L105 103.2L101.79 100L105 96.79L103.2 95L100 98.2L96.79 95Z');   }   100% {     clip-path: path('G-400 600L-400 -400L600 -400L600 600L-400 600ZM-92.31 -200L-200 -92.31L-7.69 100L-200 292.31L-92.31 400L100 207.69L292.31 400L400 292.31L207.69 100L400 -92.31L292.31 -200L100 -7.69L-92.31 -200Z');   } }

Drops

The drops transition takes reward of the power to accept multiple shapes in the same path. The path has x circles placed strategically inside the area of the element. They showtime out as tiny and unseen, and so are animated to a larger size over time. There are ten keyframes in the animation and each keyframe resizes a circle while maintaining the state of any previously resized circumvolve. This gives the advent of circles popping in or out of view one after the other during the animation.

The leave transition has the circles being shrunken out of view one at a fourth dimension and the negative space grows to wipe out the element. The enter transition plays the blitheness in contrary then that the circles enlarge and the positive space grows to reveal the new element.

The CSS used for the drops transition is rather big, and then take a await at the CSS department of the CodePen demo starting with the .drops-enter-active selector.

Numbers

This transition is similar to the x-plus transition higher up — it uses a negative shape for the animation inside a larger positive shape. In this demo, the blithe shape changes through the numbers 1, 2, and 3 until the element is wiped abroad or revealed. The numeric shapes were created past manipulating the vertices of each number into the shape of the adjacent number. Then, each number shape has the same number of vertices and curves that animate correctly from one to the adjacent.

The go out transition starts with the shape in the eye but is made to exist unseen. It then animates into the shape of the first number. The next keyframe animates to the next number and so no, then plays in opposite.

The CSS used for this is ginormous just like the last i, so take a look at the CSS section of the CodePen demo starting with the .numbers-enter-agile selector.

Hopefully this commodity has given you a good idea of how clip-path tin can be used to create flexible and powerful animations that tin can be both straightforward and complex. Animations can add a nice touch to a design and even assistance provide context when switching from i land to another. At the same time, remember to exist mindful of those who may prefer to limit the corporeality of animation or movement, for example, by setting reduced motion preferences.

housleytakinte.blogspot.com

Source: https://css-tricks.com/animating-with-clip-path/