Jump to content
Search Community

using plugins w older version of gsap

mistercoffee test
Moderator Tag

Recommended Posts

Hi all,

 

I have a client who has a Business membership and they host the files on their own CDN. Unfortunately, they never update the versions. TimelineMax is v1.20.3 and MorphSVGPlugin is v0.8.11

 

I've requested they update the files, and they say they will, but this is a HUGE tech corporation with a HUGE tech bureaucracy and nothing is ever quick!

 

So my question is -- how do I register a plugin (and use it) in this version? The plugin file does not expose window.MorphSVGPlugin  so there's no apparent way to register it as it is undefined. This is my code as it stands:

 

var tl = gsap.timeline(),
    circle = document.getElementById("circle"),
    smoke = document.getElementById("smoke-1");

tl.to(circle, 4, {morphSVG:smoke, type:"rotational", origin:"center center"}, "+=2")
  .to(circle, 4, {morphSVG:circle, type:"rotational", origin:"center center"}, "+=5");

Running it produces a console message to registerPlugin()

 

thanks!

 

Link to comment
Share on other sites

Hey mistercoffee. Welcome to the GreenSock forums!

 

1 hour ago, mistercoffee said:

So my question is -- how do I register a plugin (and use it) in this version?

By "this version" I am assuming you mean GSAP 3. 

 

1 hour ago, mistercoffee said:

var tl = gsap.timeline(),
    circle = document.getElementById("circle"),
    smoke = document.getElementById("smoke-1");

tl.to(circle, 4, {morphSVG:smoke, type:"rotational", origin:"center center"}, "+=2")
  .to(circle, 4, {morphSVG:circle, type:"rotational", origin:"center center"}, "+=5");

Running it produces a console message to registerPlugin()

This likely means that you are failing to successfully load the MorphSVGPlugin. Look in your dev tools' network tab and see if the plugin is loaded correctly.

 

If you're using a build tool, this could mean that you didn't .registerPlugin() all of the plugins you're trying to use at the top of the file. Please see the .registerPlugin() docs for more details.

 

P.S. You don't need to pass in an element to the morphSVG. You can simply use morphSVG: "#smoke-1" for example. In GSAP 3 we also recommend that you put the duration inside of the vars parameter using the duration property. 

Link to comment
Share on other sites

9 minutes ago, ZachSaucier said:

Hey mistercoffee. Welcome to the GreenSock forums!

 

By "this version" I am assuming you mean GSAP 3. 

 

This likely means that you are failing to successfully load the MorphSVGPlugin. Look in your dev tools' network tab and see if the plugin is loaded correctly.

 

If you're using a build tool, this could mean that you didn't .registerPlugin() all of the plugins you're trying to use at the top of the file. Please see the .registerPlugin() docs for more details.

 

P.S. You don't need to pass in an element to the morphSVG. You can simply use morphSVG: "#smoke-1" for example. In GSAP 3 we also recommend that you put the duration inside of the vars parameter using the duration property. 

Hi, thanks for taking the time to respond.

 

I'm referring to the versions at the top of my post, not v3. In any case, registerPlugin() needs an argument, correct? If  window.MorphSVGPlugin is undefined, how can I do that? Yes, the file is loading but nothing in the file exposes window.MorphSVGPlugin

Link to comment
Share on other sites

1 minute ago, mistercoffee said:

registerPlugin() needs an argument, correct?

Correct.

 

1 minute ago, mistercoffee said:

If  window.MorphSVGPlugin is undefined, how can I do that?

You can't.

There is no registerPlugin method pre GSAP 3. It was added to work around issues with build systems that occurred in GSAP 1 and 2. Plugins should automatically be available.

 

gsap.timeline() and other GSAP 3 API differences are also invalid in GSAP 1 and 2. I highly recommend looking at the GSAP 2 docs for how things are different. Alternatively you could look at the Getting Started article for GSAP 2

 

Is there a specific issue that you're running into? 

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Correct.

 

You can't.

There is no registerPlugin method pre GSAP 3. It was added to work around issues with build systems that occurred in GSAP 1 and 2. Plugins should automatically be available.

 

gsap.timeline() and other GSAP 3 API differences are also invalid in GSAP 1 and 2. I highly recommend looking at the GSAP 2 docs for how things are different. Alternatively you could look at the Getting Started article for GSAP 2

 

Is there a specific issue that you're running into? 

The specific issue is that the console is reporting that I need to registerPlugin , yet I can't (as you stated above).

Link to comment
Share on other sites

26 minutes ago, ZachSaucier said:

It cannot report that you need to registerPlugin if they are using version 1.20.3 like you said. 

 

Can you share a link to a page with the error so that we can take a look for ourselves?

@ZachSaucier I can't repro it on CodePen using the same library versions. I suspect that there's another instance of gsap bundled in my client's global js package. Sorry for not catching this earlier and thanks for your patience!

  • 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...