带有 GSAP 的 ScrollMagic - 在 animation.gsap.js 中找不到这些依赖项

Question

I am trying to use GSAP and ScrollMagic in one of my projects however, when I try and require animation.gsap.js my compiler keeps throwing the following error;

These dependencies were not found:                                                                                                                                                                                                                                                     friendly-errors 14:54:44
                                                                                                                                                                                                                                                                                       friendly-errors 14:54:44
* TimelineMax in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js                                                                                                                                                                                         friendly-errors 14:54:44
* TweenMax in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js   

I am using a plugin inside NuxtJS to require these plugins. GSAP itself works fine and ScrollMagic works fine separately. However, when it comes to using the GSAP plugin for Scroll Magic it doesn't seem to be working.

Plugin.js

import Vue from 'vue'
import Navigation from '../components/Navigation.vue'
import {TweenMax, Power2, TimelineLite, TimelineMax, TweenLite} from "gsap"
import ScrollMagic from 'scrollmagic';
require("scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap");

export default () => {
    Vue.component('navigation', Navigation);
}

 

Does anyone have any ideas as to why this might not be working?

Thank you in advance!

UPDATE: This is fixed in the latest version of GSAP

Answer 1

I think you're importing GSAP wrong. Try:

import {TweenMax, Power2, TimelineLite, TimelineMax, TweenLite} from "gsap/TweenMax"

See NPM docs for further info: https://www.npmjs.com/package/gsap#npm