Merge pull request #19 from TylerBarnes/only-pass-necessary-props-to-…

…anilink Only pass necessary props to anilink
TylerBarnes · Dec 2, 2018 · afcd9ca · afcd9ca
2 parents 051e0b9 + 90f6538
commit afcd9ca
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-transition-link",
-  "version": "1.3.4",
+  "version": "1.4.1",
   "description": "A link component for page transitions in gatsby.",
   "repository": "https://github.com/TylerBarnes/gatsby-plugin-transition-link",
   "homepage": "https://gatsby-plugin-transition-link.netlify.com/",

diff --git a/src/AniLink/Fade.js b/src/AniLink/Fade.js
@@ -5,13 +5,23 @@ import { TimelineMax } from "gsap";
 const fade = ({ exit: { length }, node, direction }) => {
   const duration = direction === "out" ? length + length / 4 : length;
   const opacity = direction === "in" ? 1 : 0;
+  const scrollTop =
+    document.scrollingElement.scrollTop ||
+    document.body.scrollTop ||
+    window.pageYOffset;
 
-  return new TimelineMax().fromTo(
-    node,
-    duration,
-    { opacity: !opacity },
-    { opacity: opacity }
-  );
+  const holdPosition =
+    direction === "out"
+      ? {
+          overflowY: "hidden",
+          height: "100vh",
+          scrollTop: scrollTop
+        }
+      : {};
+
+  return new TimelineMax()
+    .set(node, holdPosition)
+    .fromTo(node, duration, { opacity: !opacity }, { opacity: opacity });
 };
 
 export default function Fade({
@@ -21,7 +31,7 @@ export default function Fade({
   duration,
   ...props
 }) {
-  const length = duration || 0.4;
+  const length = duration || 0.8;
 
   return (
     <TransitionLink
@@ -30,7 +40,7 @@ export default function Fade({
         trigger: ({ exit, node }) => fade({ exit, node, direction: "out" })
       }}
       entry={{
-        length: length,
+        length: 0,
         trigger: ({ exit, node }) => fade({ exit, node, direction: "in" })
       }}
       {...props}

diff --git a/src/AniLink/Swipe.js b/src/AniLink/Swipe.js
@@ -90,8 +90,8 @@ export default function SwipeOver({
   const top = props.top || "exit";
   const exitLength = props.duration || 0.7;
   const entryLength = exitLength / 3.5;
-  const entryZ = top === "entry" ? 5 : 0;
-  const exitZ = top === "exit" ? 5 : 0;
+  const entryZ = top === "entry" ? 1 : 0;
+  const exitZ = top === "exit" ? 1 : 0;
 
   return (
     <TransitionLink

diff --git a/src/components/TransitionLink.js b/src/components/TransitionLink.js
@@ -5,12 +5,20 @@ import { Link } from "gatsby";
 import { triggerTransition } from "../utils/triggerTransition";
 import { Consumer } from "../context/createTransitionContext";
 
-const TransitionLink = ({ to, children, exit, entry, ...props }) => {
+const TransitionLink = ({
+  to,
+  children,
+  exit,
+  entry,
+  activeStyle,
+  className
+}) => {
   return (
     <Consumer>
       {({ ...context }) => (
         <Link
-          {...props}
+          activeStyle={activeStyle}
+          className={className}
           onClick={event =>
             triggerTransition({
               event,

diff --git a/src/wrap-page.js b/src/wrap-page.js
@@ -12,19 +12,22 @@ module.exports = ({ element, props }) => {
   return (
     <InternalProvider>
       <Consumer>
-        {({ wrapperMinHeight }) => (
-          <div
-            style={{
-              position: "relative",
-              zIndex: 0,
-              minHeight: wrapperMinHeight
-                ? `${wrapperMinHeight}px`
-                : `${!!sessionMinHeight ? sessionMinHeight + "px" : false}`
-            }}
-          >
-            <TransitionHandler {...props}>{element}</TransitionHandler>
-          </div>
-        )}
+        {({ wrapperMinHeight, inTransition }) => {
+          const minHeight = wrapperMinHeight
+            ? `${wrapperMinHeight}px`
+            : `${!!sessionMinHeight ? sessionMinHeight + "px" : false}`;
+          return (
+            <div
+              style={{
+                position: "relative",
+                zIndex: 0,
+                minHeight: inTransition ? false : minHeight
+              }}
+            >
+              <TransitionHandler {...props}>{element}</TransitionHandler>
+            </div>
+          );
+        }}
       </Consumer>
     </InternalProvider>
   );