nthnniell Posted December 11, 2020 Share Posted December 11, 2020 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. Link to comment Share on other sites More sharing options...
Solution PointC Posted December 11, 2020 Solution Share Posted December 11, 2020 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. 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 11, 2020 Share Posted December 11, 2020 Here are some instructions on how to make a demo: Link to comment Share on other sites More sharing options...
nthnniell Posted December 11, 2020 Author Share Posted December 11, 2020 Thanks! Learning inline SVGs wasn't too difficult but I doubt I would have realized that was necessary without asking. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now