Etetherin

I know that this is beyond the scope of greensock now, I really appreciate the help. So you say add ALL the svgs into one <svg> </svg>? Do you mean literally all of them? I ask because what of the ones that are in different <section>?? <section> <svg></svg> <svg></svg> <svg></svg> <svg></svg> </section> This one makes sense i could turn it into this: <section> <svg> <style>(ALL OF THE STYLES FROM ALL OF THEM</style> <g></g> <g></g> <g></g> <g></g> </svg> </section> But the ones that are in other sections i have no idea how to do that. Also I am animating parts of the svgs and they stop showing at the clipping mask like you can see this in action here: http://aambrose.musites.org/interactive/test/ Which the top right with the clouds and land going by loop seamlessly. Could i still do that if they are all in the same <svg>???? Again thank you so much for all the help, perhaps some day I will be able to repay the favor by helping out here as well :). You did inspire me to buy the pro stuff.

I downloaded the wrong one? wow im an idiot. Also im so sorry, I did not fully understand what you asked me to do. In my head i thought for sure you needed it because It was integral, but now i see what you are saying. I am again so sorry.

Im not sure how to make a reduced case, or like im not sure what to take out really. I think the svg's need to be separate for my use case. I could be wrong but I am trying trying to Hide ones at certain times and at a later point there is going to be a completely different view. Thus I think that it needs to be a different svg's. All that being said i think this is the minified version of my project?

I am not actually, thats just a symptom of me not understanding how to use codepen with your plugins. here is a screenshot of my html scripts section: It auto completed the js/MorphSVGPlugin.min.js so i know its there.... but i am still getting this: I fixed this thank you. I followed those but to be fair i still get the error....

When I try to use MotioonSVGPlugin without importing it I get this: Invalid property morphSVG set to .OrbitIndicatorProgradePath001 Missing plugin? gsap.registerPlugin() I get this readout when trying to import MorphSVGPlugin: index.js:3 Uncaught ReferenceError: MorphSVGPlugin is not defined at index.js:3 Here is how I am trying to import it as per the plugins page: //Import plugisn from GreenSock gsap.registerPlugin(MotionPathPlugin); gsap.registerPlugin(MorphSVGPlugin); I am honestly really new to coding if it was not obvious. So the codepen may not show you what you need to know. So here is what I have in my actual code to grab it with: Draggable.create($prograde,{ lockAxis: true, //allows locking to an axis type:"x", //locks to the x axis bounds: document.querySelector(".control-prograde"), //makes it so it wont drag outside of the box. dragResistance: .5, onDragEnd: function() { gsap.to(this.target, 0.25, {x: 0, y: 0});// when user lets go it sends the icon back to its start position. gsap.to(".OrbitIndicatorDefault001", 1, {morphSVG: ".OrbitIndicatorProgradePath001"}); // gsap.to(".svg_rocket", {duration: 5, motionPath: ""}); //starts the animation when the user lets go. // $DefaultOrbit.classList.add('hidden'); // $DefaultExplain.classList.add("hidden"); // $ProgradeElipse.classList.remove("hidden"); // $ProgradeExplain.classList.remove("hidden"); }, onDrag: function(){ console.log($prograde.style.transform) ; } } ); Lastly I am not sure how to get the thing to run on the codepen, I am lost and trying to figure this all out. Thanks for the help!

Idk if this works like other forums, but I am still trying to fix this. Its for something that I have to do user testing on within the next 32 hours so if someone wants to help bail me out and help get it working its so much appreciated.

So does that mean its not necessarily something that I am doing wrong then?

Ok thank you

This is my first post so if all these people who have viewed this are not helping me because of some thing I did wrong during posting please feel free to let me know.

I am trying to use MotionPath to animate along a path and it is getting the correct data for how it should move but is not actually on the path which is what i need. The code pen shows this issue. The ship "orbiting" should follow and be on the red path.