Using TweenMax/GSAP with Gulp

[unfollow]

I'm working on a site that uses Greensock's TweenMax. When I compile using GULP, ESLint returns: 

      17:4  error  "TweenMax" is not defined  no-undef

      37:6  error  "TweenMax" is not defined  no-undef

      47:8  error  "TweenMax" is not defined  no-undef

      54:4  error  "TweenMax" is not defined  no-undef

      60:4  error  "TweenMax" is not defined  no-undef

      85:8  error  "TweenMax" is not defined  no-undef

 

 

My bower.json file looks like this: 

    {

      "name": "testerr",

      "private": true,

      "dependencies": {

        "bootstrap-sass": "~3.3.5",

        "modernizr": "~2.8.1",

        "flickity": "~1.1.1",

        "gsap": "~1.18.0"

      },

      "overrides": {

        "bootstrap-sass": {

          "main": [

            "assets/stylesheets/_bootstrap.scss",

            "assets/fonts/bootstrap/*",

            "assets/javascripts/bootstrap.js",

          ]

        }

      },

      "devDependencies": {

        "chai": "~3.4.2",

        "mocha": "~2.3.4"

      }

    }

 And my package.json looks like: 

    {

      "private": true,

      "engines": {

        "node": ">=0.12.0"

      },

      "devDependencies": {

        "babel-core": "^5.5.6",

        "browser-sync": "^2.2.1",

        "del": "^1.1.1",

        "gulp": "^3.9.0",

        "gulp-autoprefixer": "^2.3.1",

        "gulp-cache": "^0.2.8",

        "gulp-eslint": "^0.13.2",

        "gulp-if": "^1.2.5",

        "gulp-imagemin": "^2.2.1",

        "gulp-load-plugins": "^0.10.0",

        "gulp-minify-css": "^1.1.1",

        "gulp-minify-html": "^1.0.0",

        "gulp-plumber": "^1.0.1",

        "gulp-sass": "^2.0.0",

        "gulp-size": "^1.2.1",

        "gulp-sourcemaps": "^1.5.0",

        "gulp-uglify": "^1.1.0",

        "gulp-useref": "^1.1.1",

        "main-bower-files": "^2.5.0",

        "opn": "^1.0.1",

        "wiredep": "^2.2.2",

        "flickity": "^1.1.2",

        "gsap": "^1.18.0"

      },

      "eslintConfig": {

        "env": {

          "node": true,

          "browser": true,

          "jquery": true

        },

        "rules": {

          "quotes": [

            2,

            "single"

          ]

        }

      }

    }

 

I can't seem to troubleshoot this issue any further beyond realizing that ESLint isn't recognizing TweenMax... even though it's been correctly linked in the HTML files and installed with bower: 

 

 

main.html 

 

      <!-- build:js(.) scripts/vendor.js -->

      <!-- bower:js -->

      <script src="/bower_components/gsap/src/minified/jquery.gsap.min.js"></script>

      <script src="/bower_components/gsap/src/minified/TweenMax.min.js"></script>

      <!-- endbower -->

      <!-- endbuild -->

 

Appreciate any assistance!

[Dipscom]

There are so many things that could be potentially going wrong here that not even a codePen example would suffice. I am not very familiar with ESLint but, I do work with Gulp and other linting preprocessor. Maybe ESLint doesn't like greensock because it is a strict version or has a rule that requires you to declare 'var' no matter what?

 

Have you tried disabling ESLint to see if it compiles and things work?

[unfollow]

Passing in TweenMax as a var into all my functions (including: 

$(function(){}); 

) worked. Appreciate the help! 

[pixel-fiend]

I'm guessing you should define TweenMax as a global var, so ESLint doesn't complain about it. 

 

"Any reference to an undeclared variable causes a warning, unless the variable is explicitly mentioned in a /*global ...*/ comment."

 

So you need to include this /*global TweenMax*/

 

http://eslint.org/docs/user-guide/configuring.html

[joe_midi]

@Carl posted up a while back for JSHint Globals:

 

Here is the full list, just add it to the ESList config file the same way (I assume its the same way, I'm currently using JSHint).

http://greensock.com/forums/topic/11369-gsap-globals-for-jshint/

{
    // Enforces undefined globals
    "undef" : true,
    // Defines common browser globals
    "browser" : true,
    // Also don't enforce these globals
    "globals": {
        //GSAP Globals
        "TimelineLite" : false,
        "TimelineMax" : false,
        "TweenLite" : false,
        "TweenMax" : false,
        "Back" : false,
        "Bounce" : false,
        "Circ" : false,
        "Cubic" : false,
        "Ease" : false,
        "EaseLookup" : false,
        "Elastic" : false,
        "Expo" : false,
        "Linear" : false,
        "Power0" : false,
        "Power1" : false,
        "Power2" : false,
        "Power3" : false,
        "Power3" : false,
        "Power4" : false,
        "Quad" : false,
        "Quart" : false,
        "Quint" : false,
        "RoughEase" : false,
        "Sine" : false,
        "SlowMo" : false,
        "SteppedEase" : false,
        "Strong" : false,
        "Draggable" : false,
        "SplitText" : false,
        "VelocityTracker" : false, 
        "CSSPlugin" : false,
        "ThrowPropsPlugin" : false, 
        "BezierPlugin" : false
    }
}

From @pixel-fiend link:

 

1. Configuration Files - use a JavaScript, JSON or YAML file to specify configuration information for an entire directory and all of its subdirectories. This can be in the form of an .eslintrc.* file or an eslintConfig field in a package.json file, both of which ESLint will look for and read automatically, or you can specify a configuration file on the command line.