Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Victor Work

gsap.Animation/ScrollMagic + Vue- CLI

Recommended Posts

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

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. 

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 5
  • Thanks 2
Link to comment
Share on other sites

Blake, I love u Guy!  <3

 

 

Working...

  • Like 3
Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...

Thank you Blake, you saved my day !

Link to comment
Share on other sites

  • 6 months later...

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×