Best way to NPM include GSAP and ScrollMagic

[JMischka]

I've found a number of examples each a bit different.  I'm wondering about best practices.  I've NPM installed GSAP and included it into my JavaScript file like so:

 

import ( TweenMax, Expo, CSSPlugin, ScrollToPlugin } from "gsap/all";

const plugins = [ScrollToPlugin, CSSPlugin];

 

Works perfectly.  I'm very happy.

I'm now messing around with ScrollMagic and interested in including it into my project and wondering the best way.  NPM install?  And then add to my markup:

 

import ScrollMagic from "scrollmagic";

import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap";

 

I'm looking for rules and best practices (not bloating my build.js file) and thoughts.

Thanks!

[GreenSock]

Glad you got GSAP working well, @JMischka. As for ScrollMagic, that's not something we authored so we don't officially support it here, but there are plenty of people around here who use it, so perhaps one of them can chime in. I haven't used ScrollMagic myself, so I'm not the best person to offer advice. You can definitely load it from a CDN, but I'm not sure about the npm stuff or compatibility with build systems. Last I heard, its author was planning to jump back in and make some updates after a while of not touching the project, so that's good news. 

 

Happy tweening!

[Dipscom]

If you want limit the amount of code that goes into your bundle, including the external libraries using the <script>  tag is still a great solution. It will be cached, won't need to be re-downloaded whenever you edit your code, you can upadate its version independently of your bundle.

 

This goes to GSAP as well. Unless you have any particular reason to include it in you bundle, there's nothing that says you should bundle it in.