cuts new build with cinematics

Author: Adam Argyle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "transition-style",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Adam Argyle",
   "description": "just add water clip-path mask transitions",
   "license": "ISC",
@@ -39,5 +39,6 @@
     "postcss-easings": "^2.0.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0"
-  }
+  },
+  "dependencies": {}
 }

src/wipes/_includes.css

@@ -16,4 +16,7 @@
 @import "out-top-right.css";
 @import "out-top-left.css";
 @import "out-bottom-right.css";
-@import "out-bottom-left.css";
+@import "out-bottom-left.css";
+
+@import "out-cinematic.css";
+@import "in-cinematic.css";

src/wipes/_vars.css

@@ -14,4 +14,7 @@
   --wipe-top-right-out: polygon(50% -50%, 150% 50%, 150% 50%, 50% -50%);
   --wipe-bottom-left-out: polygon(-50% 50%, 50% 150%, 50% 150%, -50% 50%);
   --wipe-bottom-right-out: polygon(150% 50%, 150% 50%, 50% 150%, 50% 150%);
+
+  --wipe-cinematic-out: inset(100% 0 100% 0);
+  --wipe-cinematic-mid: inset(10% 0 10% 0);
 }

src/wipes/cinematic-in.css

@@ -0,0 +1,15 @@
+@keyframes wipe-cinematic-in {
+  0% {
+    clip-path: var(--wipe-cinematic-out);
+  }
+  30%, 70% {
+    clip-path: var(--wipe-cinematic-mid);
+  }
+  100% {
+    clip-path: var(--wipe-in);
+  }
+}
+
+[transition-style="in:wipe:cinematic"] {
+   animation-name: wipe-cinematic-in;
+}

src/wipes/cinematic-out.css

@@ -0,0 +1,15 @@
+@keyframes wipe-cinematic-out {
+  0% {
+    clip-path: var(--wipe-in);
+  }
+  30%, 70% {
+    clip-path: var(--wipe-cinematic-mid);
+  }
+  100% {
+    clip-path: var(--wipe-cinematic-out);
+  }
+}
+
+[transition-style="out:wipe:cinematic"] {
+  animation-name: wipe-cinematic-out;
+}