Function MotionPathHelper

esm/MotionPathHelper.js:157–359

(targetOrTween, vars)

export var MotionPathHelper = /*#__PURE__*/function () {
  function MotionPathHelper(targetOrTween, vars) {
    var _this = this;

    if (vars === void 0) {
      vars = {};
    }

    if (!MotionPathPlugin) {
      _initCore(vars.gsap, 1);
    }

    var copyButton = _createElement("div"),
        self = this,
        offset = {
      x: 0,
      y: 0
    },
        target,
        path,
        isSVG,
        startX,
        startY,
        position,
        svg,
        animation,
        svgNamespace,
        temp,
        matrix,
        refreshPath,
        animationToScrub,
        createdSVG;

    if (targetOrTween instanceof gsap.core.Tween) {
      animation = targetOrTween;
      target = animation.targets()[0];
    } else {
      target = gsap.utils.toArray(targetOrTween)[0];
      animation = _findMotionPathTween(target);
    }

    path = _parsePath(vars.path, target, vars);
    this.offset = offset;
    position = _getPositionOnPage(target);
    startX = parseFloat(gsap.getProperty(target, "x", "px"));
    startY = parseFloat(gsap.getProperty(target, "y", "px"));
    isSVG = target.getCTM && target.tagName.toLowerCase() !== "svg";

    if (animation && !path) {
      path = _parsePath(animation.vars.motionPath.path || animation.vars.motionPath, target, animation.vars.motionPath);
    }

    copyButton.setAttribute("class", "copy-motion-path");
    copyButton.style.cssText = "border-radius:8px; background-color:rgba(85, 85, 85, 0.7); color:#fff; cursor:pointer; padding:6px 12px; font-family:Signika Negative, Arial, sans-serif; position:fixed; left:50%; transform:translate(-50%, 0); font-size:19px; bottom:10px";
    copyButton.innerText = "COPY MOTION PATH";
    copyButton._gsHelper = self;

    (gsap.utils.toArray(vars.container)[0] || _body).appendChild(copyButton);