# Sage 9 External Dependencies Gsap / Scroll Magic

**URL:** https://discourse.roots.io/t/sage-9-external-dependencies-gsap-scroll-magic/10002
**Category:** sage
**Tags:** webpack, sage9
**Created:** 2017-07-15T11:46:19Z
**Posts:** 6

## Post 1 by @Jake_Dickinson — 2017-07-15T11:46:19Z

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](https://github.com/roots/docs/blob/sage-9/sage/theme-development-and-building.md#3rd-party-packages)

---

## Post 2 by @Nicolo_Sacchi — 2017-07-17T01:15:16Z

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!

---

## Post 4 by @RiaanWest — 2018-10-11T14:32:49Z

> [@Nicolo_Sacchi](#):
>
> “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’),

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

---

## Post 5 by @beauvoir — 2019-04-09T20:03:19Z

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?

---

## Post 6 by @aitor — 2019-04-10T10:45:53Z

> [@GSAP + webpack with easing effects](https://discourse.roots.io/t/gsap-webpack-with-easing-effects/13699/4):
>
> Just for explain the alias needed. For use GSAP and ScrollMagic together, there is a malfunction with WebPack that I don’t understand completely: Here is an explanation and a fix (don’t work for me): Another fix implies the use of aliases (it works for me): And somebody mention it even in this forum: If I remove GSAP aliases I get this error at yarn build: These dependencies were not found: \* TimelineMax in ./node\_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.…