Jump to content
Search Community

How to use bonus-files-for-npm-users plugins

Droxic 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

Hello,

 

I just downloaded the current version of gsap zip package. I am a Club GreenSock member and the package includes all the bonus plugins.

 

In my project I want to use MorphSVGPlugin to do some SVG morphing.

My project setup is based on npm/webpack/react.

 

Normally to use the basic gsap API I just run :

npm install --save gsap

This works fine without any problems.

 

However as being a part of the paid version of greensock, MorphSVGPlugin is not included in that npm package.

 

So I decided to just copy/paste MorphSVGPlugin.js from bonus-files-for-npm-users to node_modules/gsap.

 

Then in my react component I just import MorphSVGPlugin. Unfortunately It doesn't seem to work. Here is  the code of my very simple react component:

import React, { Component } from 'react';
import { TweenMax, MorphSVGPlugin, Expo } from 'gsap';
class MainButton extends Component {
    componentDidMount() {
        TweenMax.to(this.line1, 4, {morphSVG: {shape:this.diag1, shapeIndex:[0]}, ease:Expo.easeOut});
    }

    render() {
        return(
            <div className="mainButton">
                <div className="linesGroup">
                    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="30" height="24.04" viewBox="0 0 30 24.04">
                        <title>Shapes</title>
                        <path id="line1" ref={path => { this.line1 = path; }} d="M30,2V6H0V2Z"/>
                        <path id="diag1" ref={path => { this.diag1 = path; }} d="M27,21.21,24.21,24,3,2.83,5.83,0Z" fill="#fff"/>
                    </svg>
                </div>
            </div>
        )
    }
}
export default MainButton;

When I run this in the browser I receive the following message in the Cosnole:

invalid morphSVG tween value: [object Object]

 

So I am not sure if this is a configuration problem with the packages or maybe It is an incorrect usage of MorphSVGPlugin.

 

I tested my SVG morphing in Codepen and it works just fine.

 

So I will be really grateful if someone can explain me how to use the bonus plugins (and particularly MorphSVGPlugin) in a npm/webpack/react project.

 

Thank you in advance.

  • Like 1
Link to comment
Share on other sites

I think the problem might be that your import statement is referencing MorphSVGPlugin as if it's a part of "gsap" which actually just points at TweenMax (and TweenMax doesn't contain MorphSVGPlugin). So to import MorphSVGPlugin, you'd do: 

 

import MorphSVGPlugin from "gsap/MorphSVGPlugin"; //assuming you put it in the node_modules/gsap folder

 

Does that solve things? 

  • Like 2
Link to comment
Share on other sites

Hello Jack,

 

Yes, It works now. Thank you very much!

 

But honestly I am not sure that I understand why It works now. And is this a good practice to just copy/paste the bonus plugin files in node_modules/gsap? Because I don't have actually defined dependencies for those files. This may cause future problems and confusion. What is the best practice actually? Maybe It is better to copy them somewhere in my src directory?

 

Thank you once again.

Link to comment
Share on other sites

It should be totally fine to put those plugin files in your src directory, sure. That's generally considered the best practice, yes. Then you'd just adjust the path that you import from. Like:
 

import TweenMax from "gsap";
import MorphSVGPlugin from "your/src/directory/MorphSVGPlugin";

 

Or most build tools allow you to set up an alias if you want an easier/shorter path. Totally up to you. 

 

Does that help? 

Link to comment
Share on other sites

  • 3 months later...

 

My node app has a node_modules directory (where i copy these bonus files) for dependencies, which I should keep out of git.

As long as each dependency is listed in package.json, anyone can create a working local copy of the app - including node_modules - by running npm install. So when I deploy to heroku with git, how does heroku get these bonus files?

Link to comment
Share on other sites

@Arumita I'm not familiar with heroku so I can't really answer that question, but please make sure that you're not distributing the bonus (members-only) plugins in a public git repo. Otherwise, that'd make it simple for anyone to circumvent our license and get the plugins without getting their own membership. See what I mean? 

 

If you're asking about how to keep the files together in a private repo, perhaps you could pull the whole gsap directory out of the node_modules directory and put them into your root or something. Just a thought. 

  • Like 1
Link to comment
Share on other sites

  • 10 months later...

Hey All,

I'm getting this error when I try to import MorphSVGPlugin in my react app saying:

./src/gsap-bonus/MorphSVGPlugin.js
   Line 1012:  'define' is not defined  no-undef
   Line 1013:  'define' is not defined  no-undef

I'm using the plugin file from bonus-files-for-npm-users folder and here's my code where I import it:

 

import { TimelineMax, CSSPlugin, AttrPlugin, Elastic, Power4, Power1 }  from "gsap/all";
import MorphSVGPlugin  from "../../gsap-bonus/MorphSVGPlugin";

 

Any thoughts? 

 

Thank you!

Link to comment
Share on other sites

Hm, it sounds like you're using the wrong file - try using the MorphSVGPlugin.js file that's in the bonus-files-for-npm-users folder (NOT the one in /umd/). It's only the UMD files that have "define()" in them. I know you said you're using the file from the correct folder, but ifyour error says "define" is not defined, that means you must be using a UMD file rather than the ES module. 

Link to comment
Share on other sites

  • 1 year later...

Good day GSAP! I have a problem to which I found this as a possible solution, unfortunately, I am unable to find the location of the DrawSVG Plugin within the gsap-member folder or even at the gsap-bonus/package folder.  It seems that gsap-bonus is no longer a folder but an archive. Moreover, inside the archive, MorphSVGPlugin which is aforementioned and DrawSVG cannot be found.

Link to comment
Share on other sites

Hey @Karma Blackshaw.

 

DrawSVG Plugin and MorphSVG Plugin are Club GreenSock benefits so they wouldn't currently be in your downloads associated with the account you posted from. Is there a different GreenSock account that has access to the club plugins that you have access to? 

 

There is a new structure to the ZIP download as of GSAP 3. I recommend that you check out this video to understand exactly what the purpose of each directory is:

 

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