CODEWITHSUNDEEP
javascriptwebpacknuxt.jsgsapscrollmagic
Gaz Jones
Gaz Jones

Reputation: 144

ScrollMagic with GSAP - These dependencies were not found in animation.gsap.js

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

Upvotes: 0

Views: 1204

Answers (1)

chiich
chiich

Reputation: 36

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

Upvotes: 1

Related Questions