Share Posted August 13, 2017 Hello GSAP'ers I'm using Vue-Cli / Webpack template and I already managed to import ScrollMagic, but when running TimelineMax with setTween I get this error: "(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js" My webpack.base.config.js is configured like this: var $ = require("jquery"); var ScrollMagic = require("scrollmagic"); var ScrollGsap = require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'); var gsap = require("gsap"); module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], 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') } And my Component.vue is like this: <script> import { TweenMax, TimelineMax } from 'gsap' import $ from 'jquery' import ScrollMagic from 'scrollmagic' import gsap from 'scrollmagic' export default { mounted () { TweenMax.from('#red', 5, {width: 0}); const tlVueGsap = new TimelineMax() .from('#blue', 5, {width: 0}) .to('#blue', 5, {x: 400}) const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: "#red" }) .setTween(tlVueGsap) .addTo(controller); } //Close Mounted } //Close Export Defautl </script> ScrollMagic is working, just the gsap.animation plugin that is not being imported Any idea how to solve it? Link of Github Project: https://github.com/Efetivos/vue_init/blob/master/src/components/GsapTest.vue Thanks Folk Link to comment Share on other sites More sharing options...
Share Posted August 14, 2017 Sorry, I'm not very familiar with ScrollMagic or Vue. animation.gsap.js is a ScrollMagic file so they would probably know best. -- i just saw your post in their github: https://github.com/janpaepke/ScrollMagic/issues/711 Hopefully they will be able to help. 1 Link to comment Share on other sites More sharing options...
Share Posted August 14, 2017 The webpack issue with Scrollmagic is a pretty easy fix, but that obviously hasn't happened. Scrollmagic hasn't been updated in 2 years. That would worry me. You need to tell webpack not to use the AMD syntax Scrollmagic has listed first by using the imports-loader. You don't put the libraries you want to import inside your webpack config. And you don't need to alias GSAP. So your webpack config could be something like this. resolve: { .... alias: { "ScrollMagicGSAP": "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap" } }, ... module: { rules: [ .... { test: /\.js$/, loader: "imports-loader?define=>false" }, ], }, .... Now try importing like this in your component. import { TweenMax, TimelineMax } from 'gsap' import $ from 'jquery' import ScrollMagic from 'scrollmagic' import 'ScrollMagicGSAP' // or maybe like this... import { TweenMax, TimelineMax } from 'gsap' import $ from 'jquery' const ScrollMagic = require('scrollmagic') require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap') 5 2 Link to comment Share on other sites More sharing options...
Author Share Posted August 15, 2017 Blake, I love u Guy! <3 Working... 3 Link to comment Share on other sites More sharing options...
Share Posted October 15, 2017 Thanks Blake, you're awesome 1 Link to comment Share on other sites More sharing options...
Share Posted November 27, 2017 Thank you Blake, you saved my day ! Link to comment Share on other sites More sharing options...
Share Posted May 29, 2018 I am new to Vue/babel development. I implemented Scroll Magic and integrated the code you have pasted for disabling AMD. I am still facing some error. Can someone guide me on the issue. package.json "dependencies": { "gsap": "^2.0.0", "imports-loader": "^0.8.0", "jquery": "^3.3.1", "scrollmagic": "^2.0.5", "vue": "^2.5.16", "vue-body-class": "^2.0.0-beta.2", "vue-router": "^3.0.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.0.0-beta.11", "@vue/cli-service": "^3.0.0-beta.11", "babel-core": "^6.22.1", "babel-loader": "^7.1.4", "css-loader": "^0.28.11", "node-sass": "^4.9.0", "postcss-loader": "^2.1.5", "sass-loader": "^7.0.1", "vue-loader": "github:vuejs/vue-loader#next", "vue-template-compiler": "^2.5.16" }, babel.config.js module.exports = { presets: [ '@vue/app' ], resolve: { extensions: ['', '.js', '.jsx','.vue'], alias: { "ScrollMagicGSAP": "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap" } }, module: { rules: [ { test: /\.vue$/, loader: "imports-loader?define=>false" }, ], }, } Error This dependency was not found: * ScrollMagicGSAP in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/views/MarketPlace.vue?vue&type=script&lang=js To install it, you can run: npm install --save ScrollMagicGSAP Can someone help me fix this. I assume i am missing on some package to import. Link to comment Share on other sites More sharing options...
Share Posted May 30, 2018 Hi Richie3355, I'm not sure why ScrollMagic is throwing that error. Unfortunately it isn't one of our products or one we officially support so there isn't too much we can do with this. Perhaps one of the community members has some thoughts, but you may want to try stackoverflow or the official ScrollMagic repo: https://github.com/janpaepke/ScrollMagic/issues Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now