TextPlugin not working with import

[mkurdziel]

Hi!

 

I have a problem with TextPlugin.

I use Webpack with Gulp, and im importing it this way: 

import { TweenMax, TimelineMax, TextPlugin } from 'gsap';

TweenMax and TimeLineMax are working fine but TextPlugin is not working at all. Just nothing happen.

 

Here is my code:

var tlHome = new TimelineMax({});

tlHome.to( ".heading--intro__1", 2, {text: "Design your brand's story."})
      .to( ".heading--intro__2", 2, {text: "Scale it up globally."})
      .to( ".heading--intro__3", 2, {text: "Predict the future."})

 

Any ideas why is TextPlugin not working?

[Dipscom]

Hey mkurdziel,

 

I'm not super experienced with Webpack myself but I wonder if you have gone over the guide in the Docs, specifically the bit that talks about "Tree shaking"?

 

It is possible that when you're bundling up Webpack is throwing it away thinking it is not being used.

[mkurdziel]

Thanks Dipscom! It was exactly what i was looking for! It's woking

[GreenSock]

Glad to hear it's working, but I'm a tad confused because "gsap" actually points to TweenMax (long story), so the only things exported from there are tools that are inside TweenMax (like CSSPlugin, TweenLite, TweenMax, TimelineLite, TimelineMax, all the eases, etc.) but TextPlugin is NOT included in TweenMax. So you can either import things from "gsap/all" or you can import TextPlugin directly (and separately) like:

 

import TextPlugin from "gsap/TextPlugin";

 

[mkurdziel]

I also thought that "gsap" points to gsap folder...

I made it this way:

 

import { TweenMax, TimelineMax, TextPlugin } from 'gsap/all';

// Webpack treeshaking fix
const plugins = [ TextPlugin ];

 

Looks like a Webpack uses unnecessary feature in this case.

Maybe there is some solution.

[GreenSock]

It's working fine for you, right? Or were you saying that something else broke? Do you still need a solution?