Registering the motionPathPlugin

[payne199]

I have a GSAP folder that contains all the gsap plugins. When wanting to use the DrawSVGPlugin,

I would simply bring that file from the plugin folder and place it in my project file, like so:

 

I would then include the following code in my html:

<script src='DrawSVGPlugin.js'></script>

I was then off and running.

 

I am now trying to include the new motionPathPlugin in my code but don’t understand how to get it there.

I don’t have the file to pull from my plugin folder to include it in the way I have done with the DrawSVGPlugin. 

 

In an effort to get it to go, I have pulled the following plugin from the CDN 

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.2/MotionPathPlugin.js">  

and have included it in my html.

 

I understand I need to register the plugin by including 

gsap.registerPlugin(MotionPathPlugin);

in my code. I have tried including it in various places in my code with no luck.

I don’t know how/where to put it.

 

I understand this is not necessarily a GSAP issue, but understand I am 55 years old,

not very computer literate, and simply discovered browser animation (GSAP) a couple years ago and have been having a lot of fun with it since.

 

If someone would educate me on this issue to take advantage of this GSAP advancement, it would be greatly appreciated. Thank you.

 

[ZachSaucier]

Hey Payne. Welcome and thanks for being a Shockingly Green member!

 

11 minutes ago, payne199 said:

I don’t have the file to pull from my plugin folder to include it in the way I have done with the DrawSVGPlugin.

You can download the latest files to get a copy of MotionPathPlugin locally  Then you include it in your page like you normally would:

<!-- The paths may need to be changed to work with your file setup -->
<script src="./gsap.min.js"></script>
<script src="./MotionPathPlugin.min.js"></script>

 

Or you can include a script tag referring to the CDN URL after you load GSAP:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/MotionPathPlugin.min.js"></script>

Our Installation page is helpful for these sorts of questions for future reference.

[payne199]

Soooo cool!! Works great! Thank you