Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Best way to NPM include GSAP and ScrollMagic

Recommended Posts

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.


Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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.

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