feat(anims): added reversed Fade animation

src/animations/fading_entrances/fadeInTopLeft.ts

@@ -8,6 +8,7 @@ const fadeInTopLeft = keyframes`
     opacity: 0;
     transform: translate3d(-100%, -100%, 0);
   }
+
   to {
     opacity: 1;
     transform: translate3d(0, 0, 0);

src/animations/fading_entrances/fadeInTopRight.ts

@@ -8,6 +8,7 @@ const fadeInTopRight = keyframes`
     opacity: 0;
     transform: translate3d(100%, -100%, 0);
   }
+
   to {
     opacity: 1;
     transform: translate3d(0, 0, 0);

src/animations/fading_exits/fadeOut.ts

@@ -0,0 +1,16 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOut.css}
+ */
+const fadeOut = keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+`;
+
+export default fadeOut;

src/animations/fading_exits/fadeOutBottomLeft.ts

@@ -0,0 +1,18 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOutBottomLeft.css}
+ */
+const fadeOutBottomLeft = keyframes`
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, 100%, 0);
+  }
+`;
+
+export default fadeOutBottomLeft;

src/animations/fading_exits/fadeOutBottomRight.ts

@@ -0,0 +1,18 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOutBottomRight.css}
+ */
+const fadeOutBottomRight = keyframes`
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 100%, 0);
+  }
+`;
+
+export default fadeOutBottomRight;

src/animations/fading_exits/fadeOutDown.ts

@@ -0,0 +1,17 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOutDown.css}
+ */
+const fadeOutDown = keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+`;
+
+export default fadeOutDown;

src/animations/fading_exits/fadeOutDownBig.ts

@@ -0,0 +1,17 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOutDownBig.css}
+ */
+const fadeOutDownBig = keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+`;
+
+export default fadeOutDownBig;

src/animations/fading_exits/fadeOutLeft.ts

@@ -0,0 +1,17 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOutLeft.css}
+ */
+const fadeOutLeft = keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+`;
+
+export default fadeOutLeft;

src/animations/fading_exits/fadeOutLeftBig.ts

@@ -0,0 +1,17 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOutLeftBig.css}
+ */
+const fadeOutLeftBig = keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+`;
+
+export default fadeOutLeftBig;

src/animations/fading_exits/fadeOutRight.ts

@@ -0,0 +1,17 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOutRight.css}
+ */
+const fadeOutRight = keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+`;
+
+export default fadeOutRight;

src/animations/fading_exits/fadeOutRightBig.ts

@@ -0,0 +1,17 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOutRightBig.css}
+ */
+const fadeOutRightBig = keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+`;
+
+export default fadeOutRightBig;

src/animations/fading_exits/fadeOutTopLeft.ts

@@ -0,0 +1,18 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOutTopLeft.css}
+ */
+const fadeOutTopLeft = keyframes`
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, -100%, 0);
+  }
+`;
+
+export default fadeOutTopLeft;

src/animations/fading_exits/fadeOutTopRight.ts

@@ -0,0 +1,18 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOutTopRight.css}
+ */
+const fadeOutTopRight = keyframes`
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, -100%, 0);
+  }
+`;
+
+export default fadeOutTopRight;

src/animations/fading_exits/fadeOutUp.ts

@@ -0,0 +1,17 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOutUp.css}
+ */
+const fadeOutUp = keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+`;
+
+export default fadeOutUp;

src/animations/fading_exits/fadeOutUpBig.ts

@@ -0,0 +1,17 @@
+import { keyframes } from "@emotion/core";
+
+/**
+ * @see {@link https://github.com/animate-css/animate.css/blob/master/source/fading_exits/fadeOutUpBig.css}
+ */
+const fadeOutUpBig = keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+`;
+
+export default fadeOutUpBig;

src/animations/fading_exits/index.ts

@@ -0,0 +1,13 @@
+export { default as fadeOut } from "./fadeOut";
+export { default as fadeOutBottomLeft } from "./fadeOutBottomLeft";
+export { default as fadeOutBottomRight } from "./fadeOutBottomRight";
+export { default as fadeOutDown } from "./fadeOutDown";
+export { default as fadeOutDownBig } from "./fadeOutDownBig";
+export { default as fadeOutLeft } from "./fadeOutLeft";
+export { default as fadeOutLeftBig } from "./fadeOutLeftBig";
+export { default as fadeOutRight } from "./fadeOutRight";
+export { default as fadeOutRightBig } from "./fadeOutRightBig";
+export { default as fadeOutTopLeft } from "./fadeOutTopLeft";
+export { default as fadeOutTopRight } from "./fadeOutTopRight";
+export { default as fadeOutUp } from "./fadeOutUp";
+export { default as fadeOutUpBig } from "./fadeOutUpBig";

src/components/Fade.tsx

@@ -17,6 +17,21 @@ import {
   fadeInUp,
   fadeInUpBig
 } from "../animations/fading_entrances";
+import {
+  fadeOut,
+  fadeOutBottomLeft,
+  fadeOutBottomRight,
+  fadeOutDown,
+  fadeOutDownBig,
+  fadeOutLeft,
+  fadeOutLeftBig,
+  fadeOutRight,
+  fadeOutRightBig,
+  fadeOutTopLeft,
+  fadeOutTopRight,
+  fadeOutUp,
+  fadeOutUpBig
+} from "../animations/fading_exits";
 
 type FadeDirection =
   | "bottom-left"
@@ -39,33 +54,73 @@ interface FadeProps extends Omit<RevealProps, "animation"> {
    * @default undefined
    */
   direction?: FadeDirection;
+  /**
+   * Specifies if the animation should make element(s) disappear.
+   * @default false
+   */
+  reverse?: boolean;
 }
 
-function getFadeKeyframes(big: boolean, direction?: FadeDirection) {
+function getFadeKeyframes(
+  big: boolean,
+  reverse: boolean,
+  direction?: FadeDirection
+) {
   switch (direction) {
     case "bottom-left":
-      return fadeInBottomLeft;
+      return reverse ? fadeOutBottomLeft : fadeInBottomLeft;
     case "bottom-right":
-      return fadeInBottomRight;
+      return reverse ? fadeOutBottomRight : fadeInBottomRight;
     case "down":
-      return big ? fadeInDownBig : fadeInDown;
+      return big
+        ? reverse
+          ? fadeOutDownBig
+          : fadeInDownBig
+        : reverse
+        ? fadeOutDown
+        : fadeInDown;
     case "left":
-      return big ? fadeInLeftBig : fadeInLeft;
+      return big
+        ? reverse
+          ? fadeOutLeftBig
+          : fadeInLeftBig
+        : reverse
+        ? fadeOutLeft
+        : fadeInLeft;
     case "right":
-      return big ? fadeInRightBig : fadeInRight;
+      return big
+        ? reverse
+          ? fadeOutRightBig
+          : fadeInRightBig
+        : reverse
+        ? fadeOutRight
+        : fadeInRight;
     case "top-left":
-      return fadeInTopLeft;
+      return reverse ? fadeOutTopLeft : fadeInTopLeft;
     case "top-right":
-      return fadeInTopRight;
+      return reverse ? fadeOutTopRight : fadeInTopRight;
     case "up":
-      return big ? fadeInUpBig : fadeInUp;
+      return big
+        ? reverse
+          ? fadeOutUpBig
+          : fadeInUpBig
+        : reverse
+        ? fadeOutUp
+        : fadeInUp;
     default:
-      return fadeIn;
+      return reverse ? fadeOut : fadeIn;
   }
 }
 
-const Fade: React.FC<FadeProps> = ({ big = false, direction, ...rest }) => {
-  return <Reveal animation={getFadeKeyframes(big, direction)} {...rest} />;
+const Fade: React.FC<FadeProps> = ({
+  big = false,
+  direction,
+  reverse = false,
+  ...rest
+}) => {
+  return (
+    <Reveal animation={getFadeKeyframes(big, reverse, direction)} {...rest} />
+  );
 };
 
 export default Fade;