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!