janpaepke / ScrollMagic

The javascript library for magical scroll interactions.
http://ScrollMagic.io
Other
14.9k stars 2.17k forks source link

Vue- CLI + gsap Animation #711

Closed Efetivos closed 7 years ago

Efetivos commented 7 years ago

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'

</script>

Any idea how to solve this: Link for Github folder: https://github.com/Efetivos/vue_init/blob/master/src/components/GsapTest.vue

Efetivos commented 7 years ago

Nothing? Nobody?

Efetivos commented 7 years ago

It's settled. Blake moderator from Greensock presented an effective solution for the import: Follow Link: https://greensock.com/forums/topic/16970-gsapanimationscrollmagic-vue-cli/

izzy23-6 commented 6 years ago

Do I have to configure ScrollMagic with webpack? Can I use the cdn?