86 lines
2.5 KiB
JavaScript
86 lines
2.5 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
|
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
|
|
var _react = _interopRequireDefault(require("react"));
|
|
|
|
var _gatsbyPluginTransitionLink = _interopRequireDefault(require("gatsby-plugin-transition-link"));
|
|
|
|
var _gsap = require("gsap");
|
|
|
|
var _jsxFileName = "/Users/tylerbarnes/Documents/GitHub/transitionlink-workspace/gatsby-plugin-transition-link/src/AniLink/MorphTo.js";
|
|
|
|
var MorphTo = function MorphTo(_ref) {
|
|
var children = _ref.children,
|
|
to = _ref.to,
|
|
duration = _ref.duration,
|
|
morph = _ref.morph;
|
|
return _react.default.createElement(_gatsbyPluginTransitionLink.default, {
|
|
to: to,
|
|
exit: {
|
|
length: duration
|
|
},
|
|
entry: {
|
|
appearAfter: duration
|
|
},
|
|
trigger:
|
|
/*#__PURE__*/
|
|
function () {
|
|
var _ref2 = (0, _asyncToGenerator2.default)(
|
|
/*#__PURE__*/
|
|
_regenerator.default.mark(function _callee(pages) {
|
|
var exit, entry, morphFromEl, morphToEl, finalMeasurements;
|
|
return _regenerator.default.wrap(function _callee$(_context) {
|
|
while (1) {
|
|
switch (_context.prev = _context.next) {
|
|
case 0:
|
|
_context.next = 2;
|
|
return pages.exit;
|
|
|
|
case 2:
|
|
exit = _context.sent;
|
|
_context.next = 5;
|
|
return pages.entry;
|
|
|
|
case 5:
|
|
entry = _context.sent;
|
|
morphFromEl = exit.node.querySelector(morph.from);
|
|
morphToEl = entry.node.querySelector(morph.to);
|
|
finalMeasurements = {
|
|
height: morphToEl.offsetHeight,
|
|
width: morphToEl.offsetWidth
|
|
};
|
|
new _gsap.TimelineMax().to(morphFromEl, duration, {
|
|
width: finalMeasurements.width,
|
|
height: finalMeasurements.height
|
|
});
|
|
|
|
case 10:
|
|
case "end":
|
|
return _context.stop();
|
|
}
|
|
}
|
|
}, _callee, this);
|
|
}));
|
|
|
|
return function (_x) {
|
|
return _ref2.apply(this, arguments);
|
|
};
|
|
}(),
|
|
__source: {
|
|
fileName: _jsxFileName,
|
|
lineNumber: 6
|
|
},
|
|
__self: this
|
|
}, children);
|
|
};
|
|
|
|
var _default = MorphTo;
|
|
exports.default = _default; |