Jump to content
Search Community

morph plug in connection

katerina Solstad test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Please, help the one who is just starting with GSAP. I purchased membership and downloaded src codes and plugins, but I cannot figure out how to  reference them in my html for script tag. Things I tried did not work.( this is how I tried to do it) 

<script src="js/MorphSVGPlugin.js"></script>

 Can someone give me a link where it explains? Thank you. 

See the Pen rdPgZW?editors=0010 by katyasorok (@katyasorok) on CodePen

Link to comment
Share on other sites

First to check the most obvious are your path links correct, is the MorphSVGPlugin.js file in a folder called js in the same directory as the file that is referencing it.

 

and have you intialized the pre dependencies either TweenLite or TweenMax first either locally or from CDN.

 

UPDATE: just to clarify: if you simply put the gsap folder you downloaded into your js folder you would have to find the folder it resides in such as "js/greensock-js-shockingly-green/src/minified/plugins/MorphSVGPlugin.min.js";

 

NOTE!!! this is just an example of where it resides in one of my projects it is not necessarily the correct path for your setup.

 

 

  • Like 4
Link to comment
Share on other sites

Hi @katerina Solstad :)

 

Welcome to the forum and thank you for joining Club GreenSock.

 

If I had to guess, I'd say @Visual-Q is probably right in wondering if you're also loading TweenMax. Here's the CDN link for that:

 

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

 

Without more to see though, we're just guessing. Since it is working in your demo, you can also export that file via the 'Export' button on the bottom right. Then you can compare the CodePen files to your local version and see what's different. 

 

Happy tweening and welcome aboard.

:)


 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

28 minutes ago, Visual-Q said:

First to check the most obvious are your path links correct, is the MorphSVGPlugin.js file in a folder called js in the same directory as the file that is referencing it.

 

and have you intialized the pre dependencies either TweenLite or TweenMax first either locally or from CDN.

 

UPDATE: just to clarify: if you simply put the gsap folder you downloaded into your js folder you would have to find the folder it resides in such as "js/greensock-js-shockingly-green/src/minified/plugins/MorphSVGPlugin.min.js";

 

NOTE!!! this is just an example of where it resides in one of my projects it is not necessarily the correct path for your setup.

 

 

Here is my question about that last thing you mentioned. If you are referencing the original files you downloaded that are in some place in you computer and your site "reads" from reference of those files, how would it read and play animation once you transfer it to server? I thought that you need to include those files inside the structure of the site. It seems to me that you are making a reference to downloaded file from directory you placed it on your computer. 

I am very new to it. Possibly I am missing the understanding of something very basic. 

As for the first part on pre dependencies., yes, I have connected to TweenMax through CDN and it works on other animations without Morph. But it works from CDN. If I use the file I downloaded - it does not work. something I am doing wrong. 

Link to comment
Share on other sites

18 minutes ago, PointC said:

Hi @katerina Solstad :)

 

Welcome to the forum and thank you for joining Club GreenSock.

 

If I had to guess, I'd say @Visual-Q is probably right in wondering if you're also loading TweenMax. Here's the CDN link for that:

 


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

 

Without more to see though, we're just guessing. Since it is working in your demo, you can also export that file via the 'Export' button on the bottom right. Then you can compare the CodePen files to your local version and see what's different. 

 

Happy tweening and welcome aboard.

:)


 

OH! Thank you! it worked! I did have reference to TweenMax, but I replaced it with the one you gave and it started to work. Probably some stupid spelling mistake that auto complete suggested based on previous misspelling by me.  Thank you. All worked. 

  • Like 1
Link to comment
Share on other sites

11 minutes ago, katerina Solstad said:

If you are referencing the original files you downloaded that are in some place in you computer and your site "reads" from reference of those files, how would it read and play animation once you transfer it to server?

 

Typically all the site files, the ones you create, and anything it depends on reside in single directory which would be uploaded to server with the exception of externally referenced files such as files from cdns or other locations.

 

In the event you are not sure about file paths here is an article on w3c:

 

https://www.w3schools.com/html/html_filepaths.asp

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

1 hour ago, Visual-Q said:

First to check the most obvious are your path links correct, is the MorphSVGPlugin.js file in a folder called js in the same directory as the file that is referencing it.

 

and have you intialized the pre dependencies either TweenLite or TweenMax first either locally or from CDN.

 

UPDATE: just to clarify: if you simply put the gsap folder you downloaded into your js folder you would have to find the folder it resides in such as "js/greensock-js-shockingly-green/src/minified/plugins/MorphSVGPlugin.min.js";

 

NOTE!!! this is just an example of where it resides in one of my projects it is not necessarily the correct path for your setup.

 

 

One more question since you are so kind _ to initialize the pre dependencies like TweenMax locally instead of from CDN - how would one do it? The way I was doing it is to copy the file I downloaded into structure of files for the site I am working on and reference those files in script tags in html file. I did it for some plugins and TweenMax.js and for my main.js where I write the script for animations. .. but it would not run my animations unless I place reference with CDN to TweenMax. 

<script src="js/main.js"></script>
<script src="js/CSSPlugin.js"></script>
<script src="js/EasePack.js"></script>
<script src="js/TweenMax.js"></script>
<script src="js/MorphSVGPlugin.js"></script>

My question is if reference to my main.js works and main.js is in the same folder with other files that I placed in it from downloaded ones, than they should work without external reference to TweenMax through CDN? why wouldn't they? Thank you. 

Link to comment
Share on other sites

Newbie moderator question... how did I claim this topic I have no idea how it works. And how do you unclaim it, I don't see anything in the moderator action about it.

 

UPDATE: And now the claim is turned off obviously I haven't got a clue what's going on.

Link to comment
Share on other sites

@Visual-Q - When you start typing an answer it should auto claim it for you. Once you start typing there should be a button that says 'I Give up' which should release it. That being said, I have had it 'stick' a few times and I ended up having to re-claim it and then give up to make the claim go away. That hasn't happened in several months though. 

 

BTW - congratulations on your moderator promotion. Well done! :)

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

20 minutes ago, PointC said:

If the main.js file has your tweens, you need to move it below the GreenSock scripts. Right now it looks like you're loading it first. Load TweenMax, then plugins, then your main.js. 

 

Happy tweening.

:)

 

Yay!!! That makes sense! It worked. I did not know about it. I thought it would not matter thinking that execution will only start after everything loads. Thank you! 

  • Like 3
Link to comment
Share on other sites

11 minutes ago, katerina Solstad said:

Yay!!! That makes sense! It worked. I did not know about it. I thought it would not matter thinking that execution will only start after everything loads. Thank you! 

 

Happy to help. Also, just an FYI: if you're loading TweenMax, you do not need to load the ease pack or CSS plugins because they are already loaded with TweenMax. Here is a list of what's included when you include TweenMax:

  • TweenLite
  • TweenMax
  • TimelineLite
  • TimelineMax
  • CSSPlugin
  • AttrPlugin
  • RoundPropsPlugin
  • DirectionalRotationPlugin
  • BezierPlugin
  • EasePack

Happy tweening.

:)

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

3 minutes ago, PointC said:

 

Happy to help. Also, just an FYI: if you're loading TweenMax, you do not need to load the ease pack or CSS plugins because they are already loaded with TweenMax. Here is a list of what's included when you include TweenMax:

  • TweenLite
  • TweenMax
  • TimelineLite
  • TimelineMax
  • CSSPlugin
  • AttrPlugin
  • RoundPropsPlugin
  • DirectionalRotationPlugin
  • BezierPlugin
  • EasePack

Happy tweening.

:)

 

Thank you. Yes, I forgot to take them off. They are there because at first I used TweenLite. Thank you. If I have a questions on totally different subject should I start another topic? I am really not too familiar how forums work. This is my first forum I have participated in.  And I got so much help! Amazing. Thank you. 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...