new hesitation effects

Author: Adam Argyle

src/circles/_includes.css

@@ -1,3 +1,6 @@
+@import "in-hesitate.css";
+@import "out-hesitate.css";
+
 @import "in-center.css";
 @import "out-center.css";
 

src/circles/_vars.css

@@ -1,6 +1,7 @@
 :root {
   --circle-center-center-out: circle(0%);
   --circle-center-center-in:  circle(125%);
+  --circle-hesitate:          circle(40%);
 
   --circle-top-left-out:      circle(0% at top left);
   --circle-top-right-out:     circle(0% at top right);

src/circles/in-hesitate.css

@@ -0,0 +1,15 @@
+@keyframes circle-in-hesitate {
+  0% {
+    clip-path: var(--circle-center-center-out);
+  }
+  40% {
+    clip-path: var(--circle-hesitate);
+  }
+  100% {
+    clip-path: var(--circle-center-center-in);
+  }
+}
+
+[transition="in:circle:hesitate"] {
+  animation-name: circle-in-hesitate;
+}

src/circles/out-hesitate.css

@@ -0,0 +1,15 @@
+@keyframes circle-out-hesitate {
+  0% {
+    clip-path: var(--circle-center-center-in);
+  }
+  40% {
+    clip-path: var(--circle-hesitate);
+  }
+  100% {
+    clip-path: var(--circle-center-center-out);
+  }
+}
+
+[transition="out:circle:hesitate"] {
+  animation-name: circle-out-hesitate;
+}

src/polygons/_vars.css

@@ -1,7 +1,7 @@
 :root {
   --diamond-center-in: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
   --diamond-center-out: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
-  --diamond-height-stretched: polygon(45% 50%, 50% 25%, 55% 50%, 50% 75%);
+  --diamond-hesitate: polygon(45% 50%, 50% 25%, 55% 50%, 50% 75%);
 
   --opposing-corners-in: polygon(0 0, 0 100%, 100% 100%, 100% 0);
   --opposing-corners-out: polygon(0 0, 50% 50%, 100% 100%, 50% 50%);

src/polygons/diamond-in-height-width.css

@@ -3,14 +3,14 @@
     clip-path: var(--diamond-center-out);
   }
   40% {
-    clip-path: var(--diamond-height-stretched);
+    clip-path: var(--diamond-hesitate);
   }
   100% {
     clip-path: var(--diamond-center-in);
   }
 }
 
-[transition="in:diamond:height-width"] {
+[transition="in:diamond:hesitate"] {
   --transition__duration: 1.5s;
   animation-name: diamond-in-double-scale;
 }

src/polygons/diamond-out-height-width.css

@@ -3,14 +3,14 @@
     clip-path: var(--diamond-center-in);
   }
   40% {
-    clip-path: var(--diamond-height-stretched);
+    clip-path: var(--diamond-hesitate);
   }
   100% {
     clip-path: var(--diamond-center-out);
   }
 }
 
-[transition="out:diamond:height-width"] {
+[transition="out:diamond:hesitate"] {
   --transition__duration: 1.5s;
   animation-name: diamond-out-double-scale;
 }

src/squares/_includes.css

@@ -1,6 +1,9 @@
+@import "in-hesitate.css";
+@import "out-hesitate.css";
+
 @import "in-center.css";
-@import "out-center.css"
-;
+@import "out-center.css";
+
 @import "out-top-left.css";
 @import "out-top-right.css";
 @import "out-bottom-left.css";

src/squares/_vars.css

@@ -1,4 +1,5 @@
 :root {
+  --square-hesitate:         inset(33% 33% 33% 33%);
   --square-out:              inset(100% 100% 100% 100%);
   --square-in:               var(--wipe-in);
   --square-top-left-out:     inset(0 100% 100% 0);

src/squares/in-hesitate.css

@@ -0,0 +1,15 @@
+@keyframes square-in-hesitate {
+  0% {
+    clip-path: var(--square-out);
+  }
+  40% {
+    clip-path: var(--square-hesitate);
+  }
+  100% {
+    clip-path: var(--square-in);
+  }
+}
+
+[transition="in:square:hesitate"] {
+  animation-name: square-in-hesitate;
+}