Sage 9 External Dependencies Gsap / Scroll Magic

sage
,
1

Hello,

Can someone help me with the correct way to install and use Gsap and Scroll Magic?

I’ve added them both fine with yarn add its just linking it up.

  import TweenMax from 'gsap/src/minified/TweenMax.min';
  import ScrollMagic from 'scrollmagic/scrollmagic/uncompressed/ScrollMagic';
  import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.min';

I just get left with not defined errors or can’t resolve espically with gsap am I installing these wrong?

Can't resolve 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.min

I’m just getting used to webpack from sage 8 is there anywhere recommended to learn this stuff? its frustrating how some of the scripts just work and others seem a pain?

I was trying to follow this: https://github.com/roots/docs/blob/sage-9/sage/theme-development-and-building.md#3rd-party-packages

1 Like
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
4

Thank you for this solution - it’s old, but it still works a charm!

1 Like
5

Hi,

I’m having the same issue here. How do your imports look like after? How do you import the scripts? I’M having issues with this method. Any ideas?

6