Jump to content
Search Community

Webpack and SplitText

bjn test
Moderator Tag

Go to solution Solved by GreenSock,

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

Guest joeldee

I am still struggling here after reading all of this at length. I am trying to use the same process to import the MorphSVGPlugin I just purchased.

I can see you have 'bonus files for npm users' in the zip package. 

So currently I am doing this:

import {TweenMax, Power2, TimelineMax} from "gsap";
import MorphSVGPlugin from '../../../assets/lib/gsap/MorphSVGPlugin';

No errors are thrown, all appears well.

I am then doing this:

let sectionBGstart = document.getElementById("aboutSectionBGstart");
var tl = new TimelineMax();
tl.to(sectionBGstart, 1, { morphSVG:"264,115 183,103 150,30 116,103 36,115 93,172 80,249 150,215 219,249 208,171", fill:"green", delay:0.5, ease:Power2.easeInOut });


The svg object succesfull changes colour, but no morphing takes place.

If I try and run any functions in the console such as MorphSVGPlugin.convertToPath then MorphSVGPlugin is not defined. I tried adding it to the global scope after the import without any luck.

I am using WebPack 2 to build all files in a VueJS environment, I am new to GSAP so apologies if I am doing something daft.

I would like to get this working, otherwise it's $99 spent on nothing :)



Link to comment
Share on other sites

Guest joeldee
8 hours ago, OSUblake said:

It sounds like you aren't importing it. Make sure the file and your path are correct. GSAP is global, so it will be on the window even if you don't name the import.


It works fine for me.



Thank you for your time and demo Blake, appreciated.

I am completely stumped... The import is pointing to the correct path (else webpack would cry and throw an error).

I just copied your entire demo into my application including replacing the version of MorphSVG with yours, alas I get the same result. The colours change but the polyogn does not morph.

You are right, this clearly points to the MorphSVGPlugin not being loaded, however it is... Ahhh!

Is it possible VueJS is screwing something up? Seems unlikely.

I suppose the next step is to build a tiny test-case involving one VueJS component, webpack and MorphSVG and see if I can get that working... I'll report back.


Link to comment
Share on other sites

  • 2 weeks later...
Guest joeldee

Hi Blake, 

Apologies for the delay I am just getting back to this project.

I will get a small test case with VueJS setup asap.

I have added MorphSVGPlugin via a private CDN in a script tag and the code I have works fine. The Webpack import is pointing to the correct place as webpack does not cry about it, even adding an alias doesnt work.

When I import the script, if I then console.log(MorphSVGPlugin) it is simply undefined - despite clearly being a correct import.

I will get a small repo setup as soon as I get chance to illustrate the problem.

Link to comment
Share on other sites

On 8/6/2017 at 9:28 PM, joeldee said:

I have added MorphSVGPlugin via a private CDN in a script tag and the code I have works fine. 


Well, at least you know it works. But Webpack is always another story. Just let me know when you get something setup. You can send me the link in a PM if you don't want to share it in the forum.

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