gsap.Animation/ScrollMagic + Vue- CLI

[Victor Work 152 Likes (Specialist)]

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

 

[Carl 9,066 Likes (Superhero)]

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. 

[OSUblake 9,990 Likes (Superhero)]

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')

 

[Victor Work 152 Likes (Specialist)]

Blake, I love u Guy!  <3

 

 

Working...

[davem 1 Likes (Newbie)]

Thanks Blake, you're awesome

[hjun 0 Likes (Newbie)]

Thank you Blake, you saved my day !

[richie3355 0 Likes (Newbie)]

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.

[Carl 9,066 Likes (Superhero)]

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