feat: Add anilink morph animation

src/AniLink/MorphTo.js

@@ -0,0 +1,36 @@
+import React from "react";
+import TransitionLink from "gatsby-plugin-transition-link";
+import { TimelineMax } from "gsap";
+
+const MorphTo = ({ children, to, duration, morph }) => (
+  <TransitionLink
+    to={to}
+    exit={{
+      length: duration
+    }}
+    entry={{
+      appearAfter: duration
+    }}
+    trigger={async pages => {
+      const exit = await pages.exit;
+      const entry = await pages.entry;
+
+      const morphFromEl = exit.node.querySelector(morph.from);
+      const morphToEl = entry.node.querySelector(morph.to);
+
+      const finalMeasurements = {
+        height: morphToEl.offsetHeight,
+        width: morphToEl.offsetWidth
+      };
+
+      new TimelineMax().to(morphFromEl, 1, {
+        width: finalMeasurements.width,
+        height: finalMeasurements.height
+      });
+    }}
+  >
+    {children}
+  </TransitionLink>
+);
+
+export default MorphTo;

src/AniLink/index.js

@@ -4,18 +4,23 @@ import Fade from "./Fade";
 import PaintDrip from "./PaintDrip";
 import SwipeOver from "./Swipe";
 import TransitionLink from "../";
+import MorphTo from "./MorphTo";
 
-export default function DefaultTransition(props) {
+export default function DefaultTransition(allProps) {
+  const { children, ...props } = allProps;
   return (
     <>
-      {props.cover && <Cover {...props}>{props.children}</Cover>}
-      {props.fade && <Fade {...props}>{props.children}</Fade>}
-      {props.paintDrip && <PaintDrip {...props}>{props.children}</PaintDrip>}
-      {props.swipe && <SwipeOver {...props}>{props.children}</SwipeOver>}
+      {props.cover && <Cover {...props}>{children}</Cover>}
+      {props.fade && <Fade {...props}>{children}</Fade>}
+      {props.paintDrip && <PaintDrip {...props}>{children}</PaintDrip>}
+      {props.swipe && <SwipeOver {...props}>{children}</SwipeOver>}
+      {!!props.morph && <MorphTo {...props}>{children}</MorphTo>}
 
-      {!props.cover && !props.fade && !props.paintDrip && !props.swipe && (
-        <TransitionLink {...props}>{props.children}</TransitionLink>
-      )}
+      {!props.cover &&
+        !props.fade &&
+        !props.paintDrip &&
+        !props.swipe &&
+        !props.morph && <TransitionLink {...props}>{children}</TransitionLink>}
     </>
   );
 }