feat(anims): added reversed Zoom animation

src/animations/zooming_exits/index.ts

@@ -0,0 +1,5 @@
+export { default as zoomOut } from "./zoomOut";
+export { default as zoomOutDown } from "./zoomOutDown";
+export { default as zoomOutLeft } from "./zoomOutLeft";
+export { default as zoomOutRight } from "./zoomOutRight";
+export { default as zoomOutUp } from "./zoomOutUp";

src/animations/zooming_exits/zoomOut.ts

@@ -0,0 +1,21 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/zooming_exits/zoomOut.css}
+ */
+const zoomOut = keyframes`
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  to {
+    opacity: 0;
+  }
+`;
+
+export default zoomOut;

src/animations/zooming_exits/zoomOutDown.ts

@@ -0,0 +1,20 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/zooming_exits/zoomOutDown.css}
+ */
+const zoomOutDown = keyframes`
+  40% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+`;
+
+export default zoomOutDown;

src/animations/zooming_exits/zoomOutLeft.ts

@@ -0,0 +1,18 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/zooming_exits/zoomOutLeft.css}
+ */
+const zoomOutLeft = keyframes`
+  40% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.1) translate3d(-2000px, 0, 0);
+  }
+`;
+
+export default zoomOutLeft;

src/animations/zooming_exits/zoomOutRight.ts

@@ -0,0 +1,18 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/zooming_exits/zoomOutRight.css}
+ */
+const zoomOutRight = keyframes`
+  40% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.1) translate3d(2000px, 0, 0);
+  }
+`;
+
+export default zoomOutRight;

src/animations/zooming_exits/zoomOutUp.ts

@@ -0,0 +1,20 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/zooming_exits/zoomOutUp.css}
+ */
+const zoomOutUp = keyframes`
+  40% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+`;
+
+export default zoomOutUp;

src/components/Zoom.tsx

@@ -9,6 +9,13 @@ import {
   zoomInRight,
   zoomInUp
 } from "../animations/zooming_entrances";
+import {
+  zoomOut,
+  zoomOutDown,
+  zoomOutLeft,
+  zoomOutRight,
+  zoomOutUp
+} from "../animations/zooming_exits";
 
 type ZoomDirection = "down" | "left" | "right" | "up";
 
@@ -18,25 +25,30 @@ interface ZoomProps extends Omit<RevealProps, "animation"> {
    * @default undefined
    */
   direction?: ZoomDirection;
+  /**
+   * Specifies if the animation should make element(s) disappear.
+   * @default false
+   */
+  reverse?: boolean;
 }
 
-function getZoomKeyframes(direction?: ZoomDirection) {
+function getZoomKeyframes(reverse: boolean, direction?: ZoomDirection) {
   switch (direction) {
     case "down":
-      return zoomInDown;
+      return reverse ? zoomOutDown : zoomInDown;
     case "left":
-      return zoomInLeft;
+      return reverse ? zoomOutLeft : zoomInLeft;
     case "right":
-      return zoomInRight;
+      return reverse ? zoomOutRight : zoomInRight;
     case "up":
-      return zoomInUp;
+      return reverse ? zoomOutUp : zoomInUp;
     default:
-      return zoomIn;
+      return reverse ? zoomOut : zoomIn;
   }
 }
 
-const Zoom: React.FC<ZoomProps> = ({ direction, ...rest }) => {
-  return <Reveal animation={getZoomKeyframes(direction)} {...rest} />;
+const Zoom: React.FC<ZoomProps> = ({ direction, reverse = false, ...rest }) => {
+  return <Reveal animation={getZoomKeyframes(reverse, direction)} {...rest} />;
 };
 
 export default Zoom;