Errors in my first motionPath attempts

[nthnniell]

Hi I'm working on a putting together a few projects that use various gsap tools. 

Right now I'm trying to animate a paper plane to float around the screen motionPath.

 

The image and the path were both made externally in adobe illustrator. I linked them to the page like so:

 

      <img id="flight_path"src="flight_path.svg" style="transform:scale(.1, 1);transform:translateY(-100px); display:flex;float:center;padding:3em;width:80%;z-index: 2;position:absolute;"></img>
      <img id="plane" src="paperplane.svg" style="position:absolute;transform:scale(.07);"></img>

 

converted the flightpath.svg and the plane.svg to a path and stored them in variables using

 

  var Fpath = MotionPathPlugin.convertToPath("#flight_path");
  var plane = MotionPathPlugin.convertToPath("#plane");

 

Then my timeline attempt looks similar to the documentation, besides the fact I replaced selector calls with the variables.

 

    .to(plane, {motionPath: {
      path: Fpath,
      align: Fpath,
      alignOrigin: [0.5,0.5],
      autoRotate: true},
      duration: 10,
      transformOrigin:"50% 50%"
    })

 

I'm getting this error: 

Uncaught DOMException: Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.

 

I've checked to make sure I'm importing things correctly.

I've double, triple, quadruple checked my spelling.

I'm using variables as selectors in other tl statements without any issue so I don't think that's the problem 

I think it's because the elements are both external images, but I'm not sure why, or what to do to troubleshoot this behavior. 

Does the convertToPath() method only work for objects created in browser? 

 

When I console log the variables that the paths ought to be stored in (based on my assumptions which may be wrong),

I get something that looks like a JS object. It logs as a drop-down tree containing all the parameters an object might have.

This doesn't seem like the path data that was shown to work in the documentation. 

I get the same information when I log the variable versus logging a call to MotionPathPlugin.convertToPath("#plane");

I don't think a codepen would help me explain this any better than what I already have. It would just be a static screen with the images on them. 

 

When I search for keywords from the error I can't find any relevant discussion about what went wrong. 

Any insight would be very appreciated. 

[PointC]

17 minutes ago, nthnniell said:

I think it's because the elements are both external images, but I'm not sure why, or what to do to troubleshoot this behavior. 

Yep. You'll want to make those inline SVGs. If you have a demo, we can get you some better answers.

 

[ZachSaucier]

Here are some instructions on how to make a demo:

 

[nthnniell]

Thanks! Learning inline SVGs wasn't too difficult but I doubt I would have realized that was necessary without asking.