78 lines
2.2 KiB
JavaScript
78 lines
2.2 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
exports.__esModule = true;
|
|
exports.default = Fade;
|
|
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
|
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
|
|
var _react = _interopRequireDefault(require("react"));
|
|
|
|
var _ = _interopRequireDefault(require("../"));
|
|
|
|
var _gsap = require("gsap");
|
|
|
|
var _jsxFileName = "/Users/tylerbarnes/Documents/GitHub/transitionlink-workspace/gatsby-plugin-transition-link/src/AniLink/Fade.js";
|
|
|
|
var fade = function fade(_ref) {
|
|
var length = _ref.exit.length,
|
|
node = _ref.node,
|
|
direction = _ref.direction;
|
|
var duration = direction === "out" ? length + length / 4 : length;
|
|
var opacity = direction === "in" ? 1 : 0;
|
|
var scrollTop = document.scrollingElement && document.scrollingElement.scrollTop || document.body.scrollTop || window.pageYOffset;
|
|
var holdPosition = direction === "out" ? {
|
|
overflowY: "hidden",
|
|
height: "100vh",
|
|
scrollTop: scrollTop
|
|
} : {};
|
|
return new _gsap.TimelineMax().set(node, holdPosition).fromTo(node, duration, {
|
|
opacity: !opacity
|
|
}, {
|
|
opacity: opacity
|
|
});
|
|
};
|
|
|
|
function Fade(_ref2) {
|
|
var exit = _ref2.exit,
|
|
entry = _ref2.entry,
|
|
removedProp = _ref2.fade,
|
|
duration = _ref2.duration,
|
|
props = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["exit", "entry", "fade", "duration"]);
|
|
var length = duration || 0.8;
|
|
return _react.default.createElement(_.default, (0, _extends2.default)({
|
|
exit: {
|
|
length: length,
|
|
trigger: function trigger(_ref3) {
|
|
var exit = _ref3.exit,
|
|
node = _ref3.node;
|
|
return fade({
|
|
exit: exit,
|
|
node: node,
|
|
direction: "out"
|
|
});
|
|
}
|
|
},
|
|
entry: {
|
|
length: 0,
|
|
trigger: function trigger(_ref4) {
|
|
var exit = _ref4.exit,
|
|
node = _ref4.node;
|
|
return fade({
|
|
exit: exit,
|
|
node: node,
|
|
direction: "in"
|
|
});
|
|
}
|
|
}
|
|
}, props, {
|
|
__source: {
|
|
fileName: _jsxFileName,
|
|
lineNumber: 37
|
|
},
|
|
__self: this
|
|
}), props.children);
|
|
} |