Sage 9 External Dependencies Gsap / Scroll Magic

sage
,
2

Scrollmagic requires some customisation to your webpack.config.js file in order to work correctly.
Specifically, you should add the following to your resolve section:

  resolve: {
    modules:[
      // ...
    ],
    alias: {
      "TweenLite": path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
      "TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
      "TimelineLite": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
      "TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
      "ScrollMagic": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
      "animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
      "debug.addIndicators": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'),
    },
  },

Merge this along the other settings you’ll find there and you should be good to go!

P.s: also make sure you have const path = require('path'); at the top of your file!

10 Likes